4

每次单击按钮时，我都尝试添加新选择，

的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-model。如何让他占位符在这种情况下工作？

这是相同的Plunker。

4

3 回答 3

11

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

于 2015-04-03T07:58:19.393 回答
1

添加 css display:block 占位符项的最快方法。

.select2-chosen{
   display: block !important;
}
于 2017-02-01T07:08:59.390 回答
1

在某些情况下，上述解决方案效果很好，而在某些情况下效果不佳。

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

希望能帮助到你...

于 2019-01-19T11:56:30.357 回答