AngularJS：使用 ng-class 调用函数

Question

我从 ng 类调用一个函数，因为我想根据价格动态返回类名。

我有 6 个数据和函数假设调用 6 次，但是当我运行代码时，我看到它调用了 12 次.....任何人都可以看到代码并告诉我为什么函数被调用 12 次6 个。

<div ng-app="myApp">
  <ul ng-controller="MyController">
    <li ng-class="setColor(item.price)" ng-repeat="item in products">{{item.name}} &mdash; {{item.price}}</li>
  </ul>
</div>


var myApp = angular.module('myApp', []);

myApp.controller('MyController', function MyController($scope) {

$scope.setColor = function(price) {

     alert(price);
}   

  $scope.products = [
    {
        'name' : 'Xbox',
        'clearance' : true,
        'price' : 30.99,
    },
    {
        'name' : 'Xbox 360',
        'clearance' : false,
        'salesStatus' : 'old',
        'price' : 99.99,
    },
    {
        'name' : 'Xbox One',
        'salesStatus' : 'new',
        'price' : 50,
    },
    {
        'name' : 'PS2',
        'clearance' : true,
        'price' : 79.99,
    },
    {
        'name' : 'PS3',
        'salesStatus' : 'old',
        'price' : 99.99,
    },
    {
        'name' : 'PS4',
        'salesStatus' : 'new',
        'price' : 20.99,
    }
    ]
})

这里是 jsfiddle https://jsfiddle.net/tridip/ob8jh2o7/1/

更新：我的目标

如果价格低于 50，则商品颜色应为红色。如果价格超过 50，则项目颜色应为黄色，如果价格超过 (50+(50*60/100))，则项目颜色应为绿色。现在告诉我如何用更少的迭代来实现它。指导我以最佳方法完成它。

谢谢

如果修复它。这是我的新小提琴链接https://jsfiddle.net/tridip/ob8jh2o7/22/

Answer 1

基于Using ng-class with a function call - called multiple times

如果你只是修改类，你可以尝试这样的事情：

var colourMap = {
    "30.99": "speciality1Class",
    "99.99": "speciality2Class",
    "50": "speciality3Class",
    "79.99": "speciality4Class",
    "20.99": "speciality5Class"
};


$scope.setColor = function(price) {
    return colourMap[price];
}   

小提琴：https://jsfiddle.net/ob8jh2o7/11/

但是，如果您使用警报或日志，它将一直被调用，因为角度使用脏检查。但是，如果您尝试触发警报，我不会使用ng-class。您可以在此处阅读有关 angulars 脏检查的更多信息 - https://docs.angularjs.org/guide/scope#scope-life-cycle。

Answer 2

Angularjs 使用dirty-check 方法，因此它需要调用所有过滤器以查看是否存在任何更改。在此之后，它检测到一个变量（您键入的变量）发生了变化，然后再次执行所有过滤器以检测是否有其他变化。

第一个调用来自正在检测更改的观察者。因为有一个，所以需要再次调用它们以查看是否有新闻更改，因为观察者可以进行更改。

Answer 3

   <li ng-class="{red : item.price <= 50 , yellow: item.price >  50 && item.price <= 50 + 50*0.6, green: item.price > 50 + 50*0.6}" ng-repeat="item in products track by $index">{{item.name}} &mdash; {{item.price}}</li>

编辑小提琴工作：https://jsfiddle.net/ob8jh2o7/21/