我在我的 Controller 中有一个非常简单的功能，只需标记一个 console.log。我需要使用一个函数来调节按钮，但在 ng-repeat 中， Controller 重复了很多次!正常吗？有可能避免这种情况吗？谢谢。这里有一个例子 http://plnkr.co/edit/sME67gQEZQSLI9FOwEAG?p=preview
相关代码:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.5" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="DigestApp">
<div ng-controller="UserCtrl as uc">
<h1>Please open the console to see</h1>
<ul>
<li ng-repeat="user in uc.users" ng-class="uc.userClasses(user)">
{{user.name}}
<button ng-if="uc.isUserEnabled(user)"
ng-click="uc.disableUser(user)">Disable</button>
</li>
</ul>
</div>
</body>
</html>
JavaScript:
angular.module("DigestApp", [])
.controller('UserCtrl', function(User) {
var vm = this;
vm.users = User.list();
vm.isUserEnabled = function(user) {
console.log('isUserEnabled');
return user.active;
};
vm.userClasses = function(user) {
console.log('userClasses');
return []
.concat(user.active ? ['user-active'] : [])
.concat(user.loggedIn ? ['user-logged-in'] : [])
.concat(user.isMe ? ['user-is-me'] : [])
.join(' ');
};
vm.disableUser = function(user) {
user.active = false;
};
})
.factory('User', function() {
return {
list: function() {
return [{
name: "me",
active: true,
loggedIn: true,
isMe: true
}];
}
};
});
最佳答案
是的，这是正常的。 Angular 无法判断函数的结果是否会发生变化，因此它会在每个摘要循环中调用它。如果您想避免这种情况，您应该计算一次该值并将结果设置为用户对象的一个属性。
<li ng-repeat="user in uc.users" ng-class="user.classes">
{{user.name}}
<button ng-if="user.active"
ng-click="uc.disableUser(user)">Disable</button>
</li>
并在 Controller 中添加一些代码来预先计算每个用户对象的 user.classes 属性(并在您更改模型状态时更新它)。
关于javascript - ng-repeat 中的 Angularjs 函数调用次数过多，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36181252/