javascript 为什么 angularJs 更新数组/哈希图的所有元素，如果只有一个改变？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14969502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why angularJs updates all elements of an array/hashmap, if only one changed?
提问by Vural
I have a simple hashmap and a simple method which displays the status in text, but when I update only 1 user-status, all of them are getting updated (function is called for all users). Is there a way to update only one element and not all of them?
我有一个简单的哈希图和一个简单的方法，它以文本形式显示状态，但是当我只更新 1 个用户状态时，它们都得到更新（为所有用户调用函数）。有没有办法只更新一个元素而不是所有元素？
Example code is here, just see what happens in console when you click on the "Change Status" button.
示例代码在这里，只需看看当您单击“更改状态”按钮时控制台中会发生什么。
HTML:
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:
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;
}
}
And the fiddle for above example:
上面例子的小提琴：
another example with iteration, which is called everytime with the getStatusInText function.
另一个迭代示例，每次使用 getStatusInText 函数调用。
回答by Alex Osborn
Updated example: http://jsfiddle.net/ztVnj/5/
更新示例：http: //jsfiddle.net/ztVnj/5/
Theory here:
理论在这里：
Move the expensive operation outside the hashmap, and manually control the update. As already mentioned, if the hashmap is changed at all, the whole ng-repeat is redrawn.
将昂贵的操作移到 hashmap 之外，并手动控制更新。如前所述，如果 hashmap 发生了变化，整个 ng-repeat 将被重绘。
Changes:
变化：
Binding to $scope, add an array to map status values to ids.
绑定到 $scope，添加一个数组以将状态值映射到 id。
$scope._users = {"123":{"name":"test","status":"0"}, "124":{"name":"test2", "status":"0"},"125":{"name":"test2", "status":"0"}};
$scope._userStatus = [];
Change template to look up this array instead:
更改模板以查找此数组：
Status: <span class="user-status{{user.status}}">{{_userStatus[id]}}</span>
Update the changeStatus function to be the only place the status text is updated, and then perform one initial iteration at the beginning.
将 changeStatus 函数更新为唯一更新状态文本的位置，然后在开始处执行一次初始迭代。
$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);
});
