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

问题描述

看通过复选框过滤数据的几个选项，但我期望的角可以轻松地做这一切，似乎什么东西相当过于复杂。

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

因此​​，有到位几个过滤器在这里，但我很感兴趣的是复选框。使用pretty漂亮的角UI模块我发现所谓的独特，它列出了不同类型的提供者和，而不是重复他们，只是列出了各类型之一。可爱的东西。

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.

推荐答案

下面是一个解决方案;显示的diff只：

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.

祝你好运！

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