使用 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选择框替换普通的选择框，但这些选择框无法正常工作。

在这里看到 plunker

当首先更改 ui-select 时，不会发生任何反应。 但是，当首先选择选择框时，ui-select 将可供使用。 然后，我可以同时使用ui-select和HTML5选择框。 但我只想使用ui-select.

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

Answer 1

您可以尝试像以下示例的带有过滤器选项的 ui-select 工作 plunker 示例：

控制器：

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