Angularjs UI 多选与初始选择

Angularjs UI multiselect with initial selection

本文关键字：选择 UI Angularjs      更新时间：2023-09-26

我正在使用Angularjs UI select。我遇到了一个问题。

这是我的代码：

Javascript： 

$scope.user.SelectedCategories
$scope.Categories= [
  { value: 'Reading', name: 'Reading Books',Id : 4 },
  { value: 'Sports', name: 'Physical Activity',Id : 9 },
  { value: 'Movies', name: 'Entertainment',Id : 7 },
  { value: 'Video Games', name: 'Passion',Id : 11 }
];

.HTML：

<div class="input-group">
      <ui-select multiple ng-model="user.SelectedCategories" theme="bootstrap" sortable="true" close-on-select="false" style="width: 350px;">
      <ui-select-match placeholder="Select Categories...">{{$item.Value}}</ui-select-match>
      <ui-select-choices repeat="category.Id as category in  Categories">{{category.Value}}
      </ui-select-choices>
</div>

现在，如何在页面重新加载时将选定的类别显示为选中的类别。选定的类别将保存在数据库中，并且在页面重新加载时，它们将在客户端可用，但是我如何将它们显示为选中，并且它们也不能出现在下拉列表中。

编辑通过nicost的建议，将从数据库中获取的选定类别分配给$scope，解决了我问题的一半。选定类别 但其余问题是这些类别也出现在下拉列表中。

UI 多选的默认行为是，如果我从下拉列表中选择一个类别，它将在上面的文本框中显示为选中，并且该类别将从下拉列表中删除，当我从所选类别中删除任何类别时，该类别将显示在下拉列表中。

就我而言，如果我在页面重新加载时从可用类别列表中删除选定的类别（我在服务器端执行此操作），那么它们不会出现在 dropdowm 中，但是当我删除任何选定的类别时，该类别不会出现在下拉列表中。

若要防止在下拉列表中显示所选类别，必须筛选其中的值。您可以使用自定义过滤器执行此操作：

<ui-select-choices  repeat="category in categories | filter: $select.search |filter:customFilter track by category.Id">

我为你创建了一个 plunker。我希望这有所帮助。

相关文章：