HTML

Question

对于这样的设置：

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

Answer 1

是的，这是正常的，基本上AngularJS使用 dirty-checking 来计算出什么（和什么时候重新粉刷

<强> How does data binding work in AngularJS?

＆＃13;

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);
};
});

＆＃13;

<!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>

＆＃13;

Answer 2

这是AngularJS的预期行为。 AngularJS使用摘要周期来检查变量是否有任何变化。因此，作为摘要周期的脏检查的一部分，它将检查几次以确保变量没有变化。请参阅“范围生命周期”部分中的更多内容：$scope。

如果您希望仅在您可以将::添加到函数调用之后才绑定该值。注意：它仍然会被调用两次，但使用::调用的时间不会超过两次。

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

ng-repeat中使用的函数在每次迭代中被调用两次

HTML

JS

浏览器控制台

的jsfiddle

2 个答案: