Pourquoi angularJs les mises à jour de tous les éléments d'un tableau/table de hachage, si un seul a changé?

J'ai une simple table de hachage et une méthode simple qui affiche l'état dans le texte, mais quand je l'ai mise à jour seulement 1 utilisateur-statut, tous d'entre eux sont mis à jour (fonction est appelée pour tous les utilisateurs). Est-il un moyen de mettre à jour un seul élément, et pas tous d'entre eux?

Exemple de code est ici, il suffit de voir ce qui se passe dans la console lorsque vous cliquez sur "Changer d'État".

HTML:

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <div class="user-panel" ng-repeat = "(id, user) in _users">
        Status: 
        <span class="user-status{{user.status}}">
            {{getStatusInText(user.status)}}
        </span>
        <hr>
        <div class="toLeft">(<b>{{id}}</b>) {{user.name}}</div>
        <div class="toRight">
            <button ng-click="changeUserStatus(id, '1')">Change Status</button>
        </div>
       <div class="clear"></div>
    </div>
  </div>    
</div>

AngularJS:

var app = angular.module('myApp', []);

function Ctrl($scope) {
    $scope._users = {"123":{"name":"test","status":"0"}, "124":{"name":"test2", "status":"0"},"125":{"name":"test2", "status":"0"}};

    $scope.getStatusInText = function(status) {
        console.log("CALLED: " + status);
        return (status === "1") ? "online" : "offline";
    }

    $scope.changeUserStatus = function(uId, status) {
        $scope._users[uId].status = status;

    }
}

Et le violon pour l'exemple ci-dessus:

http://jsfiddle.net/ztVnj/3

un autre exemple avec l'itération, qui est appelée à chaque fois avec le getStatusInText fonction.

http://jsfiddle.net/ztVnj/4/

changeUserStatus est seulement appelé une fois, mais la vue d'ensemble est en cours de mise à jour, de sorte getStatusInText est appelée une fois pour chaque utilisateur.
Que faire si j'ai 100 éléments dans la table de hachage et plus d'opérations dans getStatusInText() de la fonction, comme itérations etc. ? Ne serait-il pas de ralentissement de la page ?
À seulement 100 éléments qui fera appel à la fonction de 300 fois et avec des itérations, il sera plus de travail pour la page. Le défilement vers le Haut/vers le Bas tout en appelant la méthode, la page sera gelé.
bennadel.com/blog/...
Je pense que c'est par la conception. Angulaire n'ai aucune idée si votre getStatusInText séjour de même pour d'autres éléments ou pas. Vous pouvez toujours faire fonctionner autrement, dans de tels cas, l'évaluation a pour itérer.

OriginalL'auteur Vural Acar | 2013-02-19

  1. 5

    Mis à jour exemple: http://jsfiddle.net/ztVnj/5/

    Théorie ici:

    Déplacer l'opération coûteuse en dehors de la table de hachage, et de contrôler manuellement la mise à jour. Comme déjà mentionné, si la table de hachage est modifié, l'ensemble de la ng-repeat est redessiné.

    Changements:

    De liaison à $champ d'application, ajouter un tableau d'état de la carte des valeurs de l'ids.

    $scope._users = {"123":{"name":"test","status":"0"}, "124":{"name":"test2", "status":"0"},"125":{"name":"test2", "status":"0"}};
$scope._userStatus = [];

    Changer de modèle de regarder ce tableau plutôt:

    Status: <span class="user-status{{user.status}}">{{_userStatus[id]}}</span>

    Mise à jour de la changeStatus fonction d'être le seul endroit où le texte d'état est mis à jour, puis effectuer une première version au début.

    $scope.changeUserStatus = function(uId, status) {
    console.log("Button Clicked.");
    $scope._userStatus[uId] = $scope.getStatusInText(status);
}

angular.forEach($scope._users, function(user, uId) {
    $scope._userStatus[uId] = $scope.getStatusInText(user.status);
});

    OriginalL'auteur Alex Osborn