web-dev-qa-db-fra.com

Angular ui-select n'affiche pas la liste des options lorsqu'il est inclus dans angular-ui-bootstrap modal

Je suis confronté à un problème avec la directive anular-ui-bootstrap modal . Utilise le composant ui-select de l'angulaire dans mon application pour remplacer le code html select. Cette sélection fonctionne correctement dans toutes les pages où elle est incluse. Mais lorsque j’ai essayé de l’inclure dans une fenêtre contextuelle modale (à l’aide de ui-bootstrap$ modal _ service), la liste déroulante n’affiche pas les options  

Le numéro est reproduit ici 

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>

Toute aide serait la bienvenue. Merci d’avance.

angularjsangular-ui-bootstrapbootstrap-modalui-select
12
Dhana Sekar

Merci pour toutes vos réponses à ma question. En fait, j’essayais beaucoup de régler ce problème pendant longtemps et j’ai enfin réalisé que c’était un problème avec AngularJS, je suppose. Oui, J'ai pu résoudre ce problème simplement en mettant à jour la version de AngularJS de 1.2.16 à 1.2.20 . Et le lien de travail est ici

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

à

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

et aussi une solution mineure de ci-dessous

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

à

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

J'ai rencontré ceci (ou quelque chose de similaire) avec ngDialog. J'ai résolu mon problème en ajoutant un attribut ng-hide comme ceci:

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

Cela corrigeait le problème que je rencontrais où select-choices avait reçu un attribut ng-hide vide par le composant pour une raison quelconque, en interne, dans une boîte de dialogue. J'espère que cela vous aidera à résoudre ce problème également.

11
DeezCashews

Besoin d'ajouter l'attribut: append-to-body="false" ou si vous devez seulement, changer en CSS:

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

Dans le $ templateCache au bas de select.js de ui-select, le premier modèle est 'bootstrap/choices.tpl.html', dans lequel 'ng-show =\"$ select.items.length> 0 \" " est présent, cela permet de masquer la liste déroulante lorsqu'il n'y a pas de choix à afficher.

J'ai pensé que votre problème venait du fait que, lorsque ui-select rendait le rendu dans le modal, la collection (dans votre cas) était vide et sa longueur était donc 0. En conséquence, la classe 'ng-hide' était ajoutée à l'élément, ce qui le problème.

Ma façon de le pirater est simplement de supprimer le 'ng-show =\"$ select.items.length> 0 \"' ou de le changer en 'ng-show =\"$ select.items.length> = 0 \" '(le rendant inutile). L'effet secondaire est que la liste déroulante affiche une liste de banque vide lorsqu'il n'y a pas de choix à afficher. J'aime assez l'effet secondaire, cela donne à l'utilisateur l'assurance que la liste fonctionne.

La hauteur de la liste vide est cependant trop étroite et j'ajouterais donc une classe css pour que la liste vide soit un peu plus haute:

.ui-select-choices {hauteur minimum: 30px; }

5
Rex

J'ai eu le même problème, résolu avec:

<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>
1
user6874862

Une erreur se produit ici dans select.js 

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

Dans ce cas, la balise d’entrée a la largeur: 10px. Vous pouvez cliquer dans cette zone 10px - et cela fonctionnera. Comme nous utilisons cette librairie via bower - je le répare sans toucher à la source de la manière suivante:

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

donc, si le tableau de modèle est vide, il suffit de définir une largeur de 100%. Nous utilisons le thème 'select2'

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

J'ai eu un problème similaire. Je l'ai résolu en remplaçant ng-show par 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>
0
jerrymouse

J'ai eu le même problème, je le répare en ajoutant l'attribut append-to-body="false". 

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

J'ai aussi eu le même problème, alors je viens de changer:

append-to-body="true"

à:

append-to-body="false"
0
ThusharaHettigoda

Si vous changez la ligne pour être:

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

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

il affiche le nom de l'adresse.

0
Stu

J'ai également rencontré ce problème lors de l'utilisation de ui-modal et je résous ce problème en utilisant la condition 'ng-class' de la directive 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;
}

`` `

style.css `` `

.select_open {
    opacity: 1 !important;
}

`` `

J'espère que ça aide. ???? 

0
Warren Clarin