javascript – 初始化ng-model时,Angular ui-select占位符不起作用

我想在每次点击一个按钮时添加一个新的选择,

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({});
  }

对象数组保存在数组’choices’中,但占位符不在选择中,因为我最初使用空对象初始化ng-model.如何让占位符在这种情况下工作？

这是相同的Plunker.

解决方法:

在选择[$index]后,您缺少.selected.

如果没有这个,ui-select认为你选择了一个空对象(选择[$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

标签：javascript,angularjs,select,angularjs-select2,ui-select
来源： https://codeday.me/bug/20190716/1476413.html