Angular: 使用过滤功能更改 ng-repeat 上的数据

Question

如何使用过滤器函数在 ng-repeat 循环中更改对象的属性值？

我的项目是一个购物车，它根据视图列出产品，我有一个参数 'discount' 可以将产品价格降低 50%，我希望使用过滤器应用更改ng-repeat。

我的数据结构是：

[{  
    "categorie": "",
    "name": "",   
    "price": 12
}]

我的 ng-repeat 循环看起来像：

ng-repeat product in products |filter:'priceFilter()

我在控制器中定义的函数是：

var priceFilter = function(product){
    var filtered = [];
    if (discount == true) {
        for (var i = 0; i< product.length; i++) {
            product.price = prix.price /2;
            filtered.push(product);
        }
    }
    return filtered;
}

我错过了什么？现在它过滤掉所有结果，不返回任何内容。

Answer 1

这不是using a custom filter的正确方法如该示例所示，您需要将此行添加到您的代码中：

angular.module("yourmodulename").filter('priceFilter', function() { return priceFilter; });

并且您还需要将 html 更改为：

<ng-repeat="product in products | priceFilter">

Answer 2

对于这种情况，过滤器不是您想要的，应该使用自定义过滤器来确定某些内容是有效还是无效。并且应该只 return 一个 true 或 false。过滤器要做的就是查看列表中的当前对象，并确定它是否满足特定条件以显示在列表中。

你应该改变你的 html。

<div ng-repeat="product in products">
<div ng-if="discount">
{{product.Price / 2}}
</div>
<div ng-if="!discount">
{{product.Price}}
</div>
</div>

编辑：

如果您想更改数据，那么您不想使用过滤器。在循环显示数据之前，您需要弄清楚。如果您的折扣是一个简单的复选框，您可以向该复选框添加一个 ng-change="adjustprice()" 并让 adjustprice() 进行操作。您不想在 ng-repeat 中触摸 ng-repeat 数据。 angular 不喜欢这样，如果你尝试这样做会破坏东西。

Answer 3

尝试：

Html:

<div ng-repeat="product in products"> 
     <div> 
          {{applyDiscount(product.Price}} 
      </div>
</div>

js

$scope.applyDiscount= function(price){
        if ($scope.discount)
        {
            return price /2;
        }
        return price;}

正如 Camusensei 所说，applyDiscount 函数在每个摘要周期都会运行，从而减慢应用程序的速度。对于性能问题，更好的实现方式是使用过滤器，如果输入发生变化，该过滤器仅运行。

Html:

<div ng-repeat="product in products"> 
     <div> 
          {{product.price | priceFilter:discount}}
      </div>
</div>

Js:

myApp.filter("applyDiscount", function() {
  return function(price, discount) {
    if (discount)
        {
            return price /2;
        }
        return price;
  };
});

Angular: 使用过滤功能更改 ng-repeat 上的数据

Angular: change data on ng-repeat with filter function

angularjs

filter

ng-repeat