4

シンプルなハッシュマップとステータスをテキストで表示するシンプルなメソッドがありますが、ユーザーステータスを 1 つだけ更新すると、すべてが更新されます (すべてのユーザーに対して関数が呼び出されます)。すべてではなく、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/

4

1 に答える 1

5

更新された例: http://jsfiddle.net/ztVnj/5/

理論はこちら：

コストのかかる操作をハッシュマップの外に移動し、更新を手動で制御します。すでに述べたように、ハッシュマップが変更された場合、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 関数を更新し、最初に最初の反復を 1 回実行します。

$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);
});
于 2013-02-20T02:27:37.200 に答える