5

对于我的 AngularJS 应用程序，我在 ng-repeat 中有一个 ng-repeat，如下所示：

html:

<div ng-app="myApp">
    <div ng-controller="myController">
        <h2>working filter</h2>
        <div ng-repeat="category in categories">
            <h3>{{category}}</h3>
            <div ng-repeat="item in items | filter:{price.red: 0} ">{{item.name}}</div>
    </div>

        <h2>broken filter</h2>
        <div ng-repeat="category in categories">
            <h3>{{category}}</h3>
            <!-- price[category] should be red, blue, yellow, depending on the category in the ng-repeat -->
            <!-- price[category] should be bigger then 0 (or not zero, negative values will not occur) -->
            <div ng-repeat="item in items | filter:{price[category]: 0} ">{{item.name}}</div>
        </div>

    </div>
</div>

Javascript：

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

myApp.controller('myController', function ($scope) {

    $scope.categories = ['red', 'blue', 'yellow'];
    $scope.items = [
        {name: 'one', price:{red: 0, blue: 1, yellow: 3} },
        {name: 'two', price:{red: 2, blue: 0, yellow: 0}},
    ]    

});

请看我的 jsFiddle http://jsfiddle.net/hm8qD/

所以我遇到了两个问题：

  1. 过滤器不接受 [] 括号，因此我无法根据类别使过滤器动态化
  2. 过滤器需要返回价格[类别]大于零的项目。

对于大于零的值，我可以制作一个自定义过滤器。但是据我所知，过滤器不接受参数，所以我无法获得类别（红色、蓝色或黄色）。

请注意，这是我的实际代码的简化版本，这种上下文可能不是最有意义的。我希望我能清楚地解释我需要过滤器做什么，因为我是 AngularJS 的新手。

4

2 回答 2

3

显然，实际上可以将参数传递给您的过滤器，但您必须制作自定义过滤器而不是使用“过滤器：表达式”。我所做的是创建一个自定义过滤器，它将项目和类别作为参数并返回带有过滤项目的数组。

myApp.filter('myFilter', function () {
    return function (items, category) {
        var newItems = [];
        for (var i = 0; i < items.length; i++) {
            if (items[i].price[category] > 0) {
                newItems.push(items[i]);
            }
        };

        return newItems;
    }
});

在此处查看更新的小提琴：http: //jsfiddle.net/hm8qD/3/  

于 2013-05-17T16:03:05.500 回答
2

我找到了一个不同且非常简洁的解决方案，用于将参数发送到过滤器（用 es6 编写）：

$scope.myFilter = (category) => {
  return (item) => {
    if(category === 'fish' && item.type === 'salmon'){
       return true
    }
    return false
  }
}

标记将是：

<div ng-repeat="item in items | 
filter:myFilter(someCategory)>
     {{item.name}}
</div>

所以基本上你可以将“类别”限定在过滤器中，因为 myFilter 返回过滤器预期格式的函数。

于 2015-09-09T08:56:20.323 回答