Angularjs ng-repeat işlevinde çok fazla kez çağrılıyor

Denetleyicimde, bir konsol.log dosyasını damgalamak için çok kolay bir işleve sahibim. Bir fonksiyonu kullanarak bir düğmeyi ayarlamaya ihtiyacım var ama ng tekrarı içinde kontrol cihazı her şeyi tekrar eder! Bu normal mi? Bunu önlemek mümkün mü? Teşekkürler. Burada bir örnek http://plnkr.co/edit/sME67gQEZQSLI9FOwEAG?p=preview Angularjs ng-repeat işlevinde çok fazla kez çağrılıyor

göreli kodu:

<!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: Aşağıdaki HTML içinde

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 
     }]; 
    } 
    }; 
});

kaynak

2016-03-23 End.Game

Bu nasıl 'ng-class' direktifli çalışmadır .. her sindirimdeki ifadeyi değerlendirir .. –

Evet, bu normaldir. Açısal fonksiyonun sonucunun değişip değişmeyeceğini söyleyebilmesinin hiçbir yolu yoktur, bu yüzden her bir döngü döngüsünde bunu çağırır. Bundan kaçınmak istiyorsanız, değeri bir kez hesaplamanız ve sonucu kullanıcı nesnesinde bir öznitelik olarak ayarlamanız gerekir.

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

ve denetleyici her kullanıcı nesne üzerinde bir user.classes niteliğini ön hesaplama için bazı kod eklemek (ve modelin durumunu değiştirdiğinizde güncellemek için).

kaynak

2016-03-23 14:55:10 Duncan

Öneriniz için teşekkürler. Her neyse, eğer işlevi ng-if içinde tutmaya karar versem bile, performanslar hakkında herhangi bir sorun yaratabilir miydi? –

İşlev çok hızlıysa, çok büyük bir ng-yinelemeniz olmadığı sürece genellikle bir sorun olmaz. Temelde fonksiyondan kaçının, eğer bunu kolayca yapabilirseniz, ancak performansı zor olana kadar bir işlevi kullanmak zorsa. – Duncan

güncelleyin senin li. Burada çalışıyorum http://plnkr.co/edit/Cx5OZaY0dhmBT4WLYZpX?p=info. senin ng-class bir fonksiyonu kullanarak

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

ve ng-if genellikle için değerlendirilmesi yapıldı. Bunun yerine kapsam değişkenlerini iletebilirsiniz.

kaynak

2016-03-23 14:54:51 itsphilz

Angularjs ng-repeat işlevinde çok fazla kez çağrılıyor

cevap

İlgili konular