Angular 复选框过滤数据列表答案

【问题标题】：Angular checkbox filtering data listAngular 复选框过滤数据列表
【发布时间】：2013-09-16 20:59:18
【问题描述】：

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

关注http://plnkr.co/edit/Gog4qkLKxeH7x3EnBT0i

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

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

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

【问题讨论】：

标签： angularjs filter angularjs-ng-repeat angularjs-filter

【解决方案1】：

这是一个解决方案；仅显示差异：

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

<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 中添加：

$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。过滤器开始禁用，因此显示所有条目。

祝你好运！

【讨论】：

谢谢。目前在我的手机上，所以无法测试/玩这个。所有结果都应该首先显示，没有选中的复选框。
所以选中复选框隐藏相关记录（选中意味着过滤掉）？或者当所有复选框都处于非活动状态时，过滤也被认为是不活动的（所有未选中 -> 没有过滤器，至少有一个选中 -> 仅显示相关条目）？无论哪种方式，基于上述实现应该很简单。
它应该默认显示所有，没有选中复选框。然后用户可以编辑视图。
你好。保存到 Plunkr 时遇到问题，但不幸的是，您的编辑并没有从一开始就列出所有内容。一旦 Plunkr 工作，将发送链接。
Punkr 更新 plnkr.co/edit/Gog4qkLKxeH7x3EnBT0i?p=preview 加载时没有显示结果

【解决方案2】：

只是为了好玩，我实现了一个具有更简单 API 的解决方案（希望 cmets 中的潜在客户）。就是这样：

在控制器中添加cbFilter依赖，去掉所有checkbox相关代码，替换如下；这是新的 API（再简单不过了:)

app.controller('resultsData', function($scope, $http, cbFilter){
    ...
    $scope.checkbox = cbFilter($scope, "provider.providerId");
    ...
}

R替换列表中的过滤器（注意searchByCheckbox被checkbox替换）：

<li data-ng-repeat="result in ( filteredItems = (results | filter: searchByCarClass | filter: selectCarClass | filter: checkbox )) | orderBy:orderByFilter">

最后，添加服务：

app.factory("cbFilter", ["$parse", function($parse) {
    return function($scope, matchExpression) {
        var showAll = true,
            getter = $parse(matchExpression),
            filter = function(data) {
                if( showAll ) return true;
                return filter[getter(data)] === true;
            },
            unwatch = $scope.$watch(
                function() {
                    var x, ret = {};
                    for( x in filter ) {
                        if( !filter.hasOwnProperty(x) ) continue;
                        ret[x] = filter[x];
                    }
                    return ret;
                },
                function() {
                    showAll = true;
                    angular.forEach(filter, function(val) {
                        if( val === true ) showAll = false;
                    });
                },
                true
            );

        $scope.$on("$destroy", unwatch);

        return filter;
    };
}]);

实现比以前复杂得多，而且可能更慢。然而，API 更简单（单行）。

【讨论】：