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

Question

我正在使用普通 HTML select 框来过滤 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>

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

See plunker here

当ui-select先改变时，没有任何反应。但是当 select 框首先被 selected 时，ui-select 就可以使用了。然后我可以同时使用 ui-select 和 HTML5 select 框。但我只想使用 ui-select.

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

Answer 1

您可以像这样使用 ui-select 的工作 plunker 示例以及您的示例场景的过滤器选项来尝试：

控制器：

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

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

Change select to ui-select with ngRepeat filters

html

select

angularjs

angular-filters

ui-select