La selezione ui angolare non visualizza l'elenco di opzioni quando è inclusa nel modale angolare-ui-bootstrap

Question

Sono di fronte a un problema con la direttiva anular-ui-bootstrap modal. Sto usando il componente ui-select dell'angolare nella mia app in sostituzione della selezione html. Questa ui-select funziona perfettamente in ogni pagina che viene inclusa. ma quando ho provato ad inserirlo in un pop modale verso l'alto (con ui-bootstrap $ modale di servizio), il discesa non visualizza le opzioni

Il problema è riprodotta here

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) { 
 
    $scope.addresses = [{ 
 
    "id":1, 
 
    "name": "chennai" 
 
    }, { 
 
    "id":2, 
 
    "name": "banglore" 
 
    }, { 
 
    "id":3, 
 
    "name": "madurai" 
 
    }]; 
 
});

<div class="modal-body"> 
 
     City 
 
      <ui-select ng-model="selAddress"> 
 
       <ui-select-match placeholder="Choose an address">{{$select.selected.name}}</ui-select-match> 
 
       <ui-select-choices repeat="address in addresses track by $index" refresh-delay="0"> 
 
        <div ng-bind-html="address.a | highlight: $select.search"></div> 
 
       </ui-select-choices> 
 
      </ui-select> 
 
      
 
      Selected: <b>{{ selAddress }}</b> 
 
     </div>

Qualsiasi aiuto sarebbe molto apprezzato. Grazie in anticipo.

Answer 1

Grazie per tutte le vostre risposte per la mia domanda. In realtà stavo cercando molto per risolvere questo problema a lungo e finalmente ho capito che è un problema con AngularJS. Sì, sono stato in grado di risolvere questo problema semplicemente aggiornando la versione di AngularJS dalla 1.2.16 alla 1.2.20.E il collegamento di funzionamento è here

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> 

a

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js"></script> 

e anche una minore correzione di sotto

<div ng-bind-html="address.a | highlight: $select.search"></div> 

a

<div ng-bind-html="address.name | highlight: $select.search"></div> 

Answer 2

Se si cambia la linea da:

<ui-select-choices repeat="address.name in addresses track by $index" refresh-delay="0"> 

http://plnkr.co/edit/ybGQ9utrxR2sr8JyVc3g?p=preview

visualizza il nome dell'indirizzo.

Answer 3

Nel $ templateCache nella parte inferiore di select.js di ui-select, il primo modello è 'bootstrap/choices.tpl.html', in cui 'ng-show = \ "$ select.items.length> 0 \ "'è presente, ciò che fa è nascondere l'elenco a discesa dall'apparire quando non ci sono scelte da visualizzare.

Ho capito che il tuo problema è dovuto al fatto che quando ui-select viene eseguito il rendering nel modale, la raccolta (nel tuo caso indirizzi) è vuota e quindi la sua lunghezza è 0, di conseguenza viene aggiunta la classe 'ng-hide' l'elemento, causando il problema.

Il mio modo di hacking è semplicemente rimuovere 'ng-show = \ "$ select.items.length> 0 \"', o cambiarlo in 'ng-show = \ "$ select.items.length> = 0 \ "'(rendendolo inutile). L'effetto collaterale è che il menu a tendina mostrerà un elenco vuoto quando non ci sono scelte da visualizzare. Mi piace piuttosto l'effetto collaterale, fornisce all'utente la certezza che l'elenco funzioni.

L'altezza della lista vuota è comunque troppo stretta e quindi vorrei aggiungere una classe CSS a fare l'elenco vuoto un po 'più alto:

.ui-select-scelte {min-height: 30px; }

Answer 4

Mi sono imbattuto in questo (o qualcosa di simile) con ngDialog. Ho risolto il mio problema con l'aggiunta di un attributo ng-hide in questo modo:

<ui-select-choices repeat="..." ng-hide="!$select.open"> 

Questo ha risolto il problema che ho avuto dove select-choices è stato dato un ng-hide attributo vuoto dal componente per qualche ragione internamente quando in una finestra di dialogo. Spero che questo ti aiuti a risolvere anche questo problema.

Answer 5

errore si verifica qui a select.js

(line 610: ctrl.searchInput.css('width', '10px');) 

In questo caso il tag di input ha larghezza: 10px. Puoi fare clic in questa area 10px e funzionerà. Come usiamo questo lib via pergolato - ho risolvere il problema senza toccare fonte nel seguente modo:

<ui-select-match placeholder="placeholder..." ng-class="{empty: !account.roles.length}">{{::$item.name}}</ui-select-match> 

così, se il modello array è vuoto - solo fare larghezza di ingresso 100%. Usiamo tema 'select2'

.empty.ui-select-match + .select2-search-field, 
.empty.ui-select-match + .select2-search-field input{ 
    width: 100% !important; 
} 

Answer 6

Ho avuto lo stesso problema, posso risolvere il problema aggiungendo l'attributo append-to-body="false".

<ui-select title="Origem" ng-disabled="disabled" append-to-body="false"> 
... 
</ui-select> 

Answer 7

Ho avuto un problema simile. Ho risolto sostituendo ng-show con ng-if

<button ng-click="toggle=!toggle">Toggle</button> 
<div ng-if="toggle"> 
    <ui-select multiple ng-model="data.projectStatusArray" theme="bootstrap" ng-disabled="disabled" style="margin:0px;"> 
     <ui-select-match class="ui-font-medium" placeholder="Choose Filter"> {{$item.display_name}} </ui-select-match> 
     <ui-select-choices repeat="fl.name as fl in filterByArray | filter: $select.search"> 
      {{fl.display_name}} 
     </ui-select-choices> 
    </ui-select> 
</div> 

Answer 8

Hai bisogno di aggiungere l'attributo: append-to-body="false" o se hai solo, il cambiamento nei CSS:

body > .ui-select-bootstrap.open { 
    z-index: 1100; /* greater then ui bootstrap modal, that 1050 */ 
} 

Answer 9

ho avuto lo stesso problema, risolto con:

<div class="row" ng-controller="*protopathyUISelectCtrl as ctrl*"> 
    <div class="form-group m-b-sm required col-md-4 col-xs-3" > 
     <div class="input-group"> 
     <span class="input-group-addon">test</span> 
     <ui-select ng-model="ctrl.country.selected" theme="bootstrap" title="Choose a country" ng-disabled="disabled" append-to-body="false"> 
      <ui-select-match placeholder="test">{{$select.selected.name}}</ui-select-match> 
      <ui-select-choices repeat="country in ctrl.countries | filter: $select.search"> 
      <span ng-bind-html="country.name | highlight: $select.search"></span> 
      <small ng-bind-html="country.code | highlight: $select.search"></small> 
      </ui-select-choices> 
     </ui-select> 
     </div> 
    </div> 
</div> 

Answer 10

ho anche avuto stesso problema così ho appena cambiato:

append-to-body="true" 

a:

append-to-body="false" 

Answer 11

Ho anche incontrato questo problema durante l'utilizzo di ui-modale e posso risolvere questo usando 'ng-class' condizione alla direttiva ui-select-choices:

modal.html ` ``

<ui-select ng-model="person.selected" theme="bootstrap" on-select="onSelect($item)" ng-click="select_open = true"> 
    <ui-select-match placeholder="制作者">{{$select.selected.name}}</ui-select-match> 
    <ui-select-choices repeat="item in people | propsFilter: {name: $select.search, email: $select.search}" ng-class="{ 'select_open': select_open }"> 
     <div ng-bind-html="item.name | highlight: $select.search"></div> 
     <small ng-bind-html="item.email | highlight: $select.search"></small> 
    </ui-select-choices> 
    <ui-select-no-choice> 
     一致するものは見つかりませんでした。 
    </ui-select-no-choice> 
</ui-select> 

`` `

app.js `` `

$scope.onSelect = function(item) { 
    $scope.open_select = false; 
} 

` ``

stile.css `` `

.select_open { 
    opacity: 1 !important; 
} 

` ``

Speranza che aiuta.