仅将 Angular 自定义过滤器转换为 javascript答案

【问题标题】：Angular custom filter into javascript only仅将 Angular 自定义过滤器转换为 javascript
【发布时间】：2014-10-23 10:14:41
【问题描述】：

我有一些复选框和一个列表。我制作了一个自定义过滤器，以根据选中的复选框过滤该列表的结果。问题是我计划让很多这些复选框过滤结果，所以我想将过滤的所有方面都移到 javascript 中。我已经看到可以通过将其添加到控制器中来实现，但我无法做到。有人能指出我正确的方向吗？

这里是小提琴：http://jsfiddle.net/webgremlin/qpyngzu8/

html

<div ng-app="someApp">
    <div ng-controller="checkboxCtrl">
        <label ng-repeat="tree in trees">
            {{ tree.name }}
            <input type="checkbox" ng-model="tree.selected"/>
        </label>
    </div>   
    <hr />
    <div ng-controller="listCtrl">
        <ul>
            <li ng-repeat="item in listItems | filterByCategory : trees">
                {{ item.name }}
            </li>
        </ul>
    </div>     
</div>

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

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() {
    return function(input, trees) {
        console.log(input, trees);
        var ret =[];
        for (var i in input){
            var match = false;
            for (var j in trees){
                if (trees[j].selected && trees[j].item == input[i].item){
                   ret.push(input[i]);   
                }
            }
        }
        if (ret.length > 0){
            return ret;
        } else {
            return input;
        }
    };
  })

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

someApp.controller('listCtrl', ['$scope','checkboxFactory','listFactory', 
function($scope, checkboxFactory,listFactory) {
    $scope.trees = checkboxFactory;
    $scope.listItems = listFactory;
    console.log($scope.listItems);

}]);

【问题讨论】：

你的意思是你想在你的控制器中使用你的 filterByCategory 过滤器吗？或者您想将过滤器功能重写为控制器上的功能？
我想在控制器中使用我现有的 filterByCategory 过滤器，这可能就是我遇到问题的原因。

标签： angularjs

【解决方案1】：

你可以这样做。只需使用 $filter 提供程序在您的控制器中查找您的 filterByCategory 过滤器并以这种方式应用它：

在这里拉小提琴：

http://jsfiddle.net/smaye81/gp4qg257/2/

【讨论】：