1

Angular を使用してユーザーのテーブルを表示しています。ユーザーを追加および編集するためのフォームを作成しました。ユーザー行がクリックされると、その特定のユーザーをコントローラーの関数に渡します。

$scope.editUser = function (selectedUser) {
    $scope.userToAdd = selectedUser;
};

上記の関数では、新しいオブジェクト $scope.userToAdd を作成します。問題は、selectedUser が $scope.userToAdd に渡されると、userToAdd にバインドされたフォームで発生した変更が selectedUser に反映されることです。誰かが値を変更してからキャンセルをクリックすると、これが問題を引き起こしています。変更がユーザー テーブルに反映されます。このシナリオの Angular のベスト プラクティスは何ですか。

4

1 に答える 1

1

angular.copy編集中のユーザーのコピーを作成するために使用できます。次に、ユーザーが [保存] をクリックすると、ユーザーをコピーして戻します。

$scope.editUser = function (selectedUser) {
    // Note: you might want to save the user's index or something so you can
    // know where to return the user, like this:
    $scope.userToAdd = angular.copy(selectedUser);
};

ユーザーをループでレンダリングしている場合は、次のようなことができます。

<li ng-repeat="user in users">
    ...
    <button ngclick="editUser(user, $index);">Edit</button>
</li>

JavaScript:

$scope.editUser = function(selectedUser, index) {
    // Note: you might want to save the user's index or something so you can
    // know where to return the user, like this:
    $scope.userToAdd = angular.copy(selectedUser);
    $scope.userToAddIndex = index;
};

$scope.saveUser = function() {
    // You may want to user angular.copy() here again, to prevent accidental
    // modification of the user.
    $scope.users[$scope.userToAddIndex] = $scope.userToAdd;
};
于 2013-08-08T17:22:37.963 に答える