ng-repeat内のAngularjs関数があまりにも多く呼び出されました

私のコントローラにはconsole.logをスタンプするだけの簡単な関数があります。私は機能を使用してボタンを調整する必要がありますが、ng-repeatの中でコントローラーは何度も何度も繰り返します！それは普通ですか？これを避けることは可能でしょうか？ありがとう。例はここにhttp://plnkr.co/edit/sME67gQEZQSLI9FOwEAG?p=preview ng-repeat内のAngularjs関数があまりにも多く呼び出されました

相対コード：

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]" 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 
     }]; 
    } 
    }; 
});

出典

2016-03-23 End.Game

これは 'ng-class'ディレクティブの働きです。各ダイジェストで式を評価します。 –

はい、これは正常です。関数の結果が変更されたかどうかを角度で判断できる方法はないため、すべてのダイジェストループで呼び出すことができます。値を一度計算し、その結果をユーザーオブジェクトの属性として設定する必要がある場合は避けてください。

<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-23 14:55:10 Duncan

提案をありがとう。とにかく、私がng-ifにこの機能を残すことに決めたとしても、パフォーマンスについて何か問題が生じる可能性はありますか？ –

機能が速い場合は、ng-repeatが非常に大きい場合を除き、通常は問題ありません。基本的には、簡単に行うことができれば機能を避けますが、実行するのが難しい場合は、パフォーマンスが問題になるまで関数を使用してください。 – Duncan

以下にHTMLでごliを更新してください。私はここで働いていますhttp://plnkr.co/edit/Cx5OZaY0dhmBT4WLYZpX?p=info。それは多くの場合に評価して、あなたのng-classとng-ifで機能を使用することにより

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

。代わりにスコープ変数を渡すことができます。

出典

2016-03-23 14:54:51 itsphilz

ng-repeat内のAngularjs関数があまりにも多く呼び出されました

答えて

関連する問題