Angular 复选框过滤数据列表 [英] Angular checkbox filtering data list

问题描述

看到了一些通过复选框过滤数据的选项，但对于我希望 Angular 轻松完成的事情来说，这一切似乎都过于复杂.

Seen a few options for filtering data via checkboxes but it all seems fairly overly complicated for something I'd expect Angular to do easily.

了解一下 http://plnkr.co/edit/Gog4qkLKxeH7x3EnBT0i

这里有一些过滤器，但我感兴趣的是复选框.使用一个非常漂亮的 Angular UI 模块，我发现它叫做 Unique，它列出了不同类型的提供者，而不是重复它们，只列出每种类型中的一个.可爱的东西.

So there are a few filters in place here but the ones I'm interested in are the checkboxes. Using a pretty nifty Angular UI module I found called Unique, it lists the different types of providers and rather than repeating them, just lists one of each type. Lovely stuff.

但是我无法过滤下面的结果集.但是，如果我从生成的复选框中获取呈现的标记并将其直接放入 HTML 中，它就可以工作，即使它是相同的.疯狂.

However I can't get that to filter the results set below. However if I take the rendered markup from the generated checkboxes and put that directly into the HTML, it works, even though it is the same. Madness.

我对过滤的理解不够，所以我做错了什么?我希望将独特的模块用于其他几个复选框过滤器.比如门牌号等

I don't understand filtering enough, so what am I doing wrong? I was hoping to use the unique module for a couple of other checkbox filters. Like door numbers, etc.

推荐答案

这里有一个解决方案；仅显示差异:

Here is a solution; showing diffs only:

在 index.html 中修改相关行如下:

In index.html modify the relevant lines as follows:

<li data-ng-repeat="result in results | unique: 'provider.name'">
    <input type="checkbox"
        id="cb_{{ result.provider.providerId }}"
        data-ng-model="checkbox[result.provider.providerId]"
    />
    <label for="cb_{{ result.provider.providerId }}">{{ result.provider.name }}</label>
</li>
...
<li data-ng-repeat="result in ( filteredItems = (results | filter: searchByCarClass | filter: selectCarClass | filter: searchByCheckbox )) | orderBy:orderByFilter">
    ...
</li>

在 script.js 中添加:

In script.js add:

$scope.checkbox = {};
var showAll = true;
$scope.searchByCheckbox = function(result) {
    return showAll || $scope.checkbox[result.provider.providerId];
};
$scope.$watch("checkbox", function(newval, oldval) {
    showAll = true;
    angular.forEach($scope.checkbox, function(val) {
        if( val === true ) showAll = false;
    });
}, true);

(编辑)将 $scope.checkbox 的键更改为 providerId.过滤器开始禁用，因此显示所有条目.

(EDIT) Changed the key to $scope.checkbox to providerId. Filter starts disabled, so all entries are shown.

祝你好运！

这篇关于Angular 复选框过滤数据列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！