1

AngularJS を使用して最初のアプリケーションを構築していますが、ちょっとした問題が発生しました。

以下のように、ユーザー配列内のすべてのユーザーをレンダリングするテーブルを取得しました。

<table class="table table-hover">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
                <th>Company</th>
                <th>Active</th>
                <th>Edit</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="user in users">
                <td>{[{ user.id }]}</td>
                <td>{[{ user.firstname }]}</td>
                <td>{[{ user.lastname }]}</td>
                <td>{[{ user.email }]}</td>
                <td>{[{ user.company }]}</td>
                <td>Yes</td>
                <td><a href="#modalUpdateUser" ng-click="getUser(user)" data-toggle="modal"><i class="icon-pencil"></i></a></td>
            </tr>
        </tbody>
    </table>

私のcontroller.jsには、ユーザーでいっぱいになる配列$scope.usersがあるので、これは完全にうまくいきます。

問題は、ng-click="getUser(user)" を持つ最後のセルです。これにより、ModalBox が開き、入力に既存のユーザー データが入力されます。

$scope.getUser = function(user) {
    $scope.user = user;
};

ModalBox では、すべての入力フィールドに ng-model="user.firstname" などがあります。したがって、これはもちろん、ModalBox の入力フィールドをテーブルのユーザーにバインドし、テーブルで変更するとテーブルのデータを即座に変更します。モーダルボックス。

しかし、私が望むのは、ModalBox のデータを編集し、ModalBox で「保存」を押した場合にのみ、テーブル内のユーザーを変更することです。

だから私の質問は、テーブルの ng-repeat からユーザー オブジェクトを取得し、ModalBox 入力にバインドされている $scope.user に渡すことができますか?

前もって感謝します、

  • ラスムス・クヌーセン

ソリューション 解決策は、angular.Copy を使用してバインディング参照なしでオブジェクトを転送することでした。ここでの作業例: http://docs.angularjs.org/guide/forms

4

2 に答える 2

0

$scope.selectedUser関数でオブジェクトと$scope.selectedIndexプロパティを作成し、getUser()代わりにインデックスを渡すことができます。

getUser(index){
    $scope.selectedIndex = index;
    $scope.selectedUser = $scope.users[index];
}

そして$scope.selectedUser、モーダルを設定するために使用します。ユーザーが [OK] をクリックすると、インデックスを使用して配列内のユーザーを置き換えることができます。

saveUser(){
    $scope.users[$scope.selectedIndex] = $scope.selectedUser;
}
于 2013-05-31T13:56:56.223 に答える