Question

我的控制器中的功能非常简单，只需加盖console.log即可。我需要使用一个函数调节一个按钮，但在ng-repeat内部，控制器会重复多次！这是正常的吗？有可能避免这种情况吗？谢谢。这里有一个例子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
      }];
    }
  };
});

Answer 1

是的，这很正常。角度无法判断函数的结果是否会发生变化，因此它会在每个摘要循环中调用它。如果要避免这种情况，则应计算一次值，并将结果设置为用户对象的属性。

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

并在控制器中添加一些代码以预先计算每个用户对象的user.classes属性（并在更改模型状态时更新它）。

Answer 2

请将HTML中的li更新为以下内容。我在这里工作http://plnkr.co/edit/Cx5OZaY0dhmBT4WLYZpX?p=info。

<li ng-repeat="user in uc.users" ng-class="{ 'user-active': user.active, 'user-logged-in': user.loggedin, 'user-is-me': user.isme }">
    {{user.name}}
    <button ng-if="user.active" ng-click="uc.disableUser(user)">Disable</button>
</li>

通过使用ng-class和ng-if中的功能，它经常进行评估。您只需传递范围变量即可。

在ng-repeat内部的Angularjs函数被调用了太多次

2 个答案: