被稱爲兩次這樣的設置：功能在每次迭代

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

來源

2017-07-12 asprin

是的，這是正常的，基本上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>

來源

2017-07-12 18:37:03 Sajeetharan

我那麼如何確保函數運行，只有兩次？ – asprin

什麼是需要調用函數內ng-repeat – Sajeetharan

根據狀態，一些css類將應用於它 – asprin

這是預期AngularJS的行爲。 AngularJS使用摘要循環來檢查變量是否有任何變化。因此，作爲摘要循環髒檢查的一部分，它將檢查幾次，以確保變量沒有變化。詳見'範圍生命週期'部分：$scope。

如果您希望值只能在您的函數調用前加上::。注意：它仍然會被調用兩次，但使用::將被調用不超過兩次。

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

來源

2017-07-12 18:38:54

是的，這是預期的行爲。每次使用ng-repeat創建新的DOM元素時，都會執行faClass。

這是爲了這樣工作，因爲作爲函數faClass可能會在不同的情況下返回不同的結果，並且AngularJS根據需要重新繪製視圖（根據這種新情況）。

而且，每次執行$digest時，faClass將再次調用$scope.data.checkList.length倍。

爲了避免這種情況，你可以使用一個ng-class bind once這樣的：

ng-class="::faClass(item.status)"

來源

2017-07-12 18:41:02 lealceldeiro

功能在每次迭代

HTML

JS

瀏覽器控制檯

的jsfiddle

回答

相關問題