javascript – 为什么angularJs更新数组/ hashmap的所有元素,如果只更改了一个?

我有一个简单的hashmap和一个简单的方法,它在文本中显示状态,但是当我只更新1个用户状态时,所有这些都会更新(为所有用户调用函数).有没有办法只更新一个元素而不是全部元素?

示例代码在这里,只需查看单击“更改状态”按钮时控制台中发生的情况.

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;

    }
}

以上例子的小提琴:

http://jsfiddle.net/ztVnj/3

迭代的另一个例子,每次使用getStatusInText函数调用.

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

最佳答案
更新示例:http://jsfiddle.net/ztVnj/5/

理论在这里:

将昂贵的操作移到hashmap之外,并手动控制更新.如前所述,如果完全改变了散列映射,则重绘整个ng-repeat.

变化:

绑定到$scope,添加一个数组以将状态值映射到id.

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

更改模板以查找此数组:

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

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

转载注明原文:javascript – 为什么angularJs更新数组/ hashmap的所有元素,如果只更改了一个? - 代码日志