AngularJS 中 ng-repeat 中的动态过滤器 [英] Dynamic filter within ng-repeat in AngularJS

问题描述

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

HTML:

<div ng-controller="myController"><h2>工作过滤器</h2><div ng-repeat="类别中的类别"><h3>{{category}}</h3><div ng-repeat="item in items | filter:{price.red: 0} ">{{item.name}}</div>
<h2>破碎的过滤器</h2><div ng-repeat="类别中的类别"><h3>{{category}}</h3><!-- price[category] ​​应该是红色、蓝色、黄色，具体取决于 ng-repeat 中的类别 --><!-- price[category] ​​应该大于 0(或者不为零，不会出现负值)--><div ng-repeat="item in items | filter:{price[category]: 0} ">{{item.name}}</div>

Javascript:

var myApp = angular.module('myApp', []);myApp.controller('myController', function ($scope) {$scope.categories = ['红色','蓝色','黄色'];$scope.items = [{name: 'one', price:{red: 0, blue: 1, yellow: 3} },{名称:'二'，价格:{红色:2，蓝色:0，黄色:0}}，]});

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

所以我遇到了两个问题:

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

对于大于零，我可以制作自定义过滤器.然而，据我所知，过滤器不接受参数，所以我无法获得类别(红色、蓝色或黄色).

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

解决方案

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

myApp.filter('myFilter', function () {返回函数(项目，类别){var newItems = [];for (var i = 0; i < items.length; i++) {如果 (items[i].price[category] ​​> 0) {newItems.push(items[i]);}};返回新项目；}});

在此处查看更新的 Fiddle:http://jsfiddle.net/hm8qD/3/  

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:

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}},
    ]    

});

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

So I ran into two problems:

1. The flter does not accept [] brackets so I cannot make the filter dynamic, based on the category
2. The filter needs to return items that have a price[category] greater then zero.

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.

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.

解决方案

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;
    }
});

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

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