Заполнитель Angular ui-select не работает при инициализации ng-модели

Я пытаюсь добавить новый выбор каждый раз, когда нажимается кнопка,

HTML:

 <div ng-repeat = "select in selects track by $index">
  <ui-select ng-model="selects[$index]" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="person in people">
      <div ng-bind-html="person.name | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
 </div>
 <button ng-click="addNewSelect()"> Add new select</button>

Контроллер:

  $scope.selects = [{}];
  $scope.addNewSelect = function() {
    $scope.selects.push({});
  }

Массив объектов сохраняется в массиве «выбирает», но заполнитель не входит в выбор, поскольку я изначально инициализирую ng-модель с пустым объектом. Как заставить его работать в этом случае?

Вот Plunker для того же.


javascript angularjs select ui-select angularjs-select2
person Anubha    schedule 03.04.2015    source источник

Ответы (3)


arrow_upward
11
arrow_downward

Вам не хватает .selected после selects[$index].

Без этого ui-select считает, что вы выбрали пустой объект (selects[$index]) и не будет отображать заполнитель.

<ui-select ng-model="selects[$index].selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">

http://plnkr.co/edit/56SHyE01BJ4EXglLlIcb?p=preview

также вам не нужно искать по индексу, вы можете просто использовать select.selected

<ui-select ng-model="select.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">

http://plnkr.co/edit/3Uq8lDtDOaj5mIZVrCfv?p=preview

person dting    schedule 03.04.2015
comment
Ранее использовался выбор угловых страпов, где изначально заполнитель появлялся, даже если объект был пуст, поэтому пропустил это, спасибо. - person Anubha; 03.04.2015

arrow_upward
1
arrow_downward

Самый быстрый способ сделать это, добавив css display:block заполнитель.

.select2-chosen{
   display: block !important;
}
person Hadnazzar    schedule 01.02.2017

arrow_upward
1
arrow_downward

Есть случаи, когда вышеуказанное решение отлично работает, а когда нет.

<ui-select ng-model="selectedChannel"
           on-select="$ctrl.channelSelected(selectedChannel)">
    <ui-select-match placeholder="Select Channel Type">
        {{selectedChannel.text}}
    </ui-select-match>
    <ui-select-choices ui-select-header-group-selectable="$ctrl.selectGroupHeader"
                       group-by="groupFindChannel"
                       repeat="channel in (r.channels | filter: $select.search) track by channel.id">
        <div ng-bind-html="channel.text | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

^ Здесь, чтобы показать заполнитель... просто сделайте

$scope.selectedChannel = null;

Надеюсь, поможет...

person Ken007    schedule 19.01.2019