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。你可以在这里阅读更多关于角度脏检查的信息 - 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/

AngularJS：使用ng-class进行函数调用

更新：我的目标

3 个答案: