gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 20:11:40 25 4
gpt4 key购买 nike

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

网址:

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

所以我遇到了两个问题:
  • 过滤器不接受 [] 括号,因此我无法根据类别
  • 使过滤器动态化
  • 过滤器需要返回 price[category] ​​大于零的项目。

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

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

    最佳答案

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

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

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

    关于angularjs - AngularJS 中 ng-repeat 中的动态过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16608376/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com