Question

我试着编写一个自定义过滤器来过滤一些复选框，但没有运气，我在这里找到了一个解决方案，但没有，但没有人适合 - 是否有另一种方法来编写这个复选框功能 - 我是否构建了这个角度应用程序错误??

我在jsfiddle中重新创建了我的小角度应用程序（http://jsfiddle.net/samstimpson/vorg019v/）：

var someApp = angular.module('someApp', []);

someApp.factory('searchFactory', function(){
    return { query: "" }
});

someApp.factory('checkboxFactory', function() {
    var checkboxFactory = [
        { name: 'item 1', item: 1 },
        { name: 'item 2', item: 2 },
        { name: 'item 3', item: 3 }
    ];
    return checkboxFactory;
});

someApp.factory('listFactory', function() {
    var listFactory = [
        { name: 'list item 01', item: 1 },
        { name: 'list item 02', item: 2 },
        { name: 'list item 03', item: 3 },
        { name: 'list item 04', item: 1 },
        { name: 'list item 05', item: 2 },
        { name: 'list item 06', item: 3 },
        { name: 'list item 07', item: 1 },
        { name: 'list item 08', item: 2 },
        { name: 'list item 09', item: 3 },
        { name: 'list item 10', item: 1 }
    ];
    return listFactory;
});

someApp.filter('filterByCategory', function($filter) {
    return function(listItems) {
        console.log(listItems);
    };
});

someApp.controller('checkboxCtrl', ['$scope','checkboxFactory', 'searchFactory', function($scope, checkboxFactory, searchFactory) {
    $scope.checkboxes = checkboxFactory;
    $scope.search = searchFactory;
}]);

someApp.controller('listCtrl', ['$scope','listFactory','searchFactory', function($scope, listFactory, searchFactory) {
    $scope.listItems = listFactory;
    //console.log(search);
    $scope.search = searchFactory;
}]);

Answer 1

你需要添加一些东西。

首先存储模型中选中框的事实：

<input type="checkbox" ng-model="checkbox.selected"/>

然后定义filterByCategory进行过滤：

someApp.filter('filterByCategory', function() {
    return function(input, checkboxes) {
        console.log(input, checkboxes);
        var ret =[];
        for (var i in input){
            var match = false;
            for (var j in checkboxes){
                if (checkboxes[j].selected && checkboxes[j].item == input[i].item){
                   ret.push(input[i]);   
                }
            }
        }
        if (ret.length > 0){
            return ret;
        } else {
            return input;
        }
    };
});

有关此过滤器的一些说明：过滤函数可以带n个参数，第一个是要过滤的数组，下面的（arg1，arg2，...）是你使用的参数。

array | filterName:arg1:arg2

我们希望使用复选框过滤listItems，这就是为什么我这样做

然后你需要让你的ListController知道复选框：

someApp.controller('listCtrl', ['$scope','checkboxFactory','listFactory','searchFactory', function($scope, checkboxFactory,listFactory, searchFactory) {
$scope.checkboxes = checkboxFactory;

最后在列表中使用您的过滤器：

<li ng-repeat="item in listItems | filter: search.query | filterByCategory : checkboxes">
    {{ item.name }}
</li>

所有这些修改都可以在小提琴上找到：http://jsfiddle.net/vorg019v/2/

角度复选框过滤

1 个答案: