我正在使用 Angularjs UI 选择。我遇到了一个问题。
这是我的代码:
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.SelectedCategories,但问题的其余部分是这些类别也出现在下拉列表中。
ui 多选的默认行为是,如果我从下拉列表中选择一个类别,它会在上面的文本框中显示为选中状态,并且该类别将从下拉列表中删除,当我从所选类别中删除任何类别时,该类别就会出现在下拉列表中。
就我而言,如果我在页面重新加载时从可用类别列表中删除选定的类别(我在服务器端执行此操作),那么它们不会出现在下拉列表中,但是当我删除任何选定的类别时,该类别不会出现在下拉列表。
最佳答案
为了防止在下拉列表中显示选定的类别,您必须过滤其中的值。您可以使用自定义过滤器来执行此操作:
<ui-select-choices repeat="category in categories | filter: $select.search |filter:customFilter track by category.Id">
我创建了一个plunker为你。 我希望这会有所帮助。
关于javascript - Angularjs UI 多选和初始选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36788610/