【问题标题】：Function used inside ng-repeat is being called twice in every iteration [duplicate]ng-repeat 中使用的函数在每次迭代中被调用两次 [重复]
【发布时间】：2017-07-12 18:30:00
【问题描述】：

对于这样的设置：

HTML

<li ng-repeat="item in data.checkList">                
   <i ng-class="faClass(item.status)">&nbsp;</i>&nbsp;<span>{{item.Name}}</span>
</li>

JS

$scope.data.checkList = [
   {'status':'COMPLETED', 'name':'Task 1'},
   {'status':'NOT STARTED', 'name':'Task 2'}
];

$scope.faClass = function(status){
   console.log(status);
};

浏览器控制台

COMPLETED
NOT STARTED
COMPLETED
NOT STARTED

这是预期的行为吗？如何解决并避免重复？

JSFIDDLE

Demo

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

是的，这很正常，基本上 AngularJS 使用 dirty-checking 来弄清楚什么（和何时）重新粉刷。

How does data binding work in AngularJS?

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
$scope.data ={};
 $scope.data.checkList = [
   {'status':'COMPLETED', 'name':'Task 1'},
   {'status':'NOT STARTED', 'name':'Task 2'}
];

$scope.faClass = function(status){
   console.log(status);
};
});

<!DOCTYPE html>
<html>
<head> 
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <div ng-app="myApp" ng-controller="AppCtrl">
  <div class="form-group">
  <li ng-repeat="item in data.checkList">                
   <i ng-class="faClass(item.status)">&nbsp;</i>&nbsp;<span>{{item.name}}</span>
</li>
</div>
 </div>
</body>

</html>

【讨论】：

那么我如何确保函数只运行两次？
ng-repeat里面需要调用什么函数
根据状态，会应用多个css类
你可以有条件地应用css类stackoverflow.com/questions/23762578/…

【解决方案2】：

这是 AngularJS 的预期行为。 AngularJS 使用一个摘要循环来检查变量是否有任何变化。因此，作为摘要循环脏检查的一部分，它将检查几次以确保变量没有更改。在“范围生命周期”部分查看更多信息：$scope。

如果您希望只绑定一次值，您可以在函数调用前添加 ::。注意：它仍然会被调用两次，但使用::调用的次数不会超过两次。

<i ng-class="::faClass(item.status)">&nbsp;</i>&nbsp;<span>{{item.Name}}</span>

【讨论】：