为什么angularJs更新数组/散列表中的所有元素,如果只有一个变化?只有一个、数组、元素、列表中

由网友(无人生还)分享简介:我有一个简单的HashMap和显示文本状态的简单方法,但是当我只更新1用户状态,所有的人都得到更新(函数被调用的所有用户)。有没有一种方法来更新只有一个元素,而不是所有的人? I have a simple hashmap and a simple method which displays the status i...

我有一个简单的HashMap和显示文本状态的简单方法,但是当我只更新1用户状态,所有的人都得到更新(函数被调用的所有用户)。有没有一种方法来更新只有一个元素,而不是所有的人?

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?

例子code是在这里,正好看到当你点击更改状态按钮,控制台会发生什么。

Example code is here, just see what happens in console when you click on the "Change Status" button.

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:

http://jsfiddle.net/ztVnj/3

与迭代,这就是所谓的getStatusInText功能每次另一实例

another example with iteration, which is called everytime with the getStatusInText function.

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

推荐答案

更新例如:的http:// jsfiddle.net/ztVnj/5/

理论这里

将昂贵的操作HashMap的外面,手动控制更新。正如前面提到的,如果HashMap的是在一切都变了,整个NG重复重绘。

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.

更改

绑定到$范围中,添加一个数组状态值映射到IDS。

Binding to $scope, add an array to map status values to ids.

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

更新changeStatus函数为状态文本被更新的唯一地方,然后在开始执行一个初始迭代

Update the changeStatus function to be the only place the status text is updated, and then perform one initial iteration at the beginning.

$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);
});
阅读全文

相关推荐

最新文章