Question

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

我的项目是一个购物车，根据视图列出产品，我有一个参数'折扣'，这将减少产品价格的50％，我希望使用{{1的过滤器来应用更改}}。

我的数据结构是：

ng-repeat

我的[{ "categorie": "", "name": "", "price": 12 }]循环如下：

ng-repeat

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

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

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

Answer 1

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

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

您还需要将html更改为：

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

Answer 2

过滤器不是您想要的场景，应使用自定义过滤器来确定某些内容是有效还是无效。并且应该只返回真或假。所有过滤器都要查看列表中的当前对象，并确定它是否符合列表中显示的特定条件。

你应该改变你的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数据。角度不喜欢这样，如果你尝试它会破坏它。

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数据

3 个答案: