Angular ui-select не отображает список опций при включении в angular -ui-bootstrap modal

Я столкнулся с проблемой с директивой anular-ui-bootstrap modal. Я использую компонент angular ui-select в своем приложении в качестве замены для выбора html. Этот ui-select работает нормально на любой странице, в которую он входит. Но когда я попытался включить его в модальное всплывающее окно (используя сервис ui-bootstrap $модальный), раскрывающийся список не отображает параметры

Проблема воспроизводится здесь

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>

Ответ 1

Спасибо за все ваши ответы на мой вопрос. На самом деле я много пытался решить эту проблему надолго, и, наконец, я сам понял, что это вопрос с AngularJS, я думаю. Да, я смог исправить это, просто обновив версию AngularJS с 1.2.16 до 1.2.20. И рабочая ссылка здесь

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

а также незначительное исправление ниже

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

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

Ответ 2

Я столкнулся с этим (или чем-то похожим) с ngDialog. Я исправил свою проблему, добавив атрибут ng-hide, например:

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

Это устранило проблему, с которой я столкнулся, когда select-choices был предоставлен атрибут ng-hide пустой компонентом по какой-либо причине внутри, когда в диалоговом окне. Надеюсь, это поможет вам решить эту проблему.

Ответ 3

Нужно добавить атрибут: append-to-body="false" или вам нужно только изменить CSS:

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

Ответ 4

В $templateCache в нижней части select.js из ui-select первый шаблон - это "bootstrap/choice.tpl.html", в котором "ng-show = \" $select.items.length > 0\"'присутствует, то, что это делает, заключается в том, чтобы скрыть раскрывающийся список, если нет выбора для отображения.

Я понял, что ваша проблема в том, что когда ui-select является рендерингом в модальном, коллекция (в адресах вашего случая) пуста, и поэтому ее длина равна 0, в результате в класс 'ng-hide' добавляется класс элемент, вызывающий проблему.

Мой способ взлома - просто удалить "ng-show = \" $select.items.length > 0\ "'или изменить его на' ng-show = \" $select.items.length >= 0\"(что делает его бесполезным). Побочным эффектом является то, что в раскрывающемся списке будет показан пустой список банков, если нет выбора для отображения. Я предпочитаю побочный эффект, он дает пользователю уверенность в том, что список работает.

Высота пустого списка, однако, слишком узкая, поэтому я бы добавил класс css, чтобы сделать пустой список немного выше:

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

Ответ 5

У меня была такая же проблема, она была решена с помощью:

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

Ответ 6

Если вы измените строку:

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

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

отображает имя адреса.

Ответ 7

Здесь происходит ошибка в select.js

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

В этом случае входной тег имеет ширину: 10 пикселей. Вы можете щелкнуть в этой области 10px - и она будет работать. Поскольку мы используем этот lib через bower - я исправляю его, не касаясь источника следующим образом:

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

поэтому, если массив модели пуст, просто сделайте ширину ввода 100%. Мы используем тему "select2"

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

Ответ 8

У меня была такая же проблема, я исправил ее, добавив атрибут append-to-body="false".

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

Ответ 9

У меня была аналогичная проблема. Я решил это, заменив ng-show на 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>

Ответ 10

У меня также была такая же проблема, поэтому я просто изменил:

append-to-body="true"

append-to-body="false"