使用 ngRepeat 过滤器将选择更改为 ui-select

Question

我正在使用纯 HTML 选择框来过滤 ngRepeat 结果，如下所示：

<select ng-model="theFilter.choice">
    <option value="">Any</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
</select>

<select ng-model="theFilter.otherChoice">
    <option value="">Any</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
</select>

<div class="col-xs-12" 
     ng-repeat="item in options | filter: { showMe: theFilter.choice, amIDeleted: theFilter.otherChoice }">
    <p>{{ item.showMe }}</p>
    <p>{{ item.amIDeleted }}</p>
</div>

这按预期工作。但是，就像我们都知道浏览器选择框的样式不是很好一样，所以我尝试用ui-select 选择框替换普通选择框，但是这些选择框无法正常工作。

See plunker here

首先更改 ui-select 时，没有任何反应。但是当首先选择选择框时， ui-select 变得可以使用。然后我可以同时使用ui-select 和HTML5 选择框。但我只想使用ui-select。

我的问题是：有什么方法可以使用ui-select 而不是普通的选择框来过滤我的结果？

Answer 1

您可以尝试像这样工作的plunker ui-select 示例，带有示例场景的过滤器选项：

控制器：

$scope.theFilter = { 
    showMe: $scope.options[0].showMe, 
    amIDeleted: $scope.options[0].amIDeleted  
};