3

我的控制器中有一个非常简单的功能，只需标记一个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
      }];
    }
  };
});
4

2 回答 2

2

是的，这很正常。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>

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

于 2016-03-23T14:55:10.390 回答
0

请将您li在 HTML 中的内容更新为以下内容。我在这里工作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经常评估。您可以只传递范围变量。

于 2016-03-23T14:54:51.540 回答