AngularJS中ng-repeat中的动态过滤器

问题描述

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

For my AngularJS app I have an ng-repeat in an ng-repeat like so:

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:

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/

Please see my jsFiddle http://jsfiddle.net/hm8qD/

所以我遇到了两个问题:

So I ran into two problems:

1. 过滤器不接受[]括号，因此我无法根据类别动态设置过滤器
2. 过滤器需要返回价格[类别]大于零的商品.

对于大于零的值，我可以创建一个自定义过滤器.但是据我所知，过滤器不接受参数，因此我无法将其分类(红色，蓝色或黄色).

For the greater then zero I could just make a custom filter. However as far as I know filters don't accept parameters so I have no way of getting the category (red, blue or yellow) to it.

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

Please note this is an simplified version of my actual code and this context might not make the best of sense. I hope I was clear in explaining what I need the filter to do, since I'm new to AngularJS.

推荐答案

显然，实际上可以将参数传递给过滤器，但是您必须制作一个自定义过滤器，而不是使用"filter:expression".我所做的是创建一个自定义过滤器，该过滤器将项目和类别作为参数，并返回包含已过滤项目的数组.

Apparently it is actually possible to pass arguments to your filter, but you have to make a custom filter instead of using "filter: expression". What I did was create a custom filter which takes the items and category as arguments and returns the array with filtered items.

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/  ;

See the updated Fiddle here: http://jsfiddle.net/hm8qD/3/  

这篇关于AngularJS中ng-repeat中的动态过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！