Question

我正在使用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）”的Cell，它打开一个ModalBox并用现有用户数据填充输入。

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

在ModalBox中，所有输入字段都有ng-model =“user.firstname”等。所以这个当然将ModalBox中的输入字段绑定到我的表中的用户，并在我在ModalBox中更改它时立即更改表中的数据。

但我想要的是编辑ModalBox中的数据，然后如果我在ModalBox中按“保存”，则只更改表中的用户。

所以我的问题是，我可以从我的表中的ng-repeat中获取用户对象并将其交给我的$ scope.user，它绑定到我的ModalBox输入而不会将它们全部绑定在一起吗？

提前致谢，

Rasmus Knudsen

解决方案解决方案是使用angular.Copy传输没有绑定引用的对象。这里的工作示例：http://docs.angularjs.org/guide/forms

Answer 1

您可以在$scope.selectedUser函数中创建$scope.selectedIndex对象和getUser()属性，而不是通过索引：

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

然后使用$scope.selectedUser填充模态。用户单击“确定”后，您可以使用索引替换阵列中的用户。

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

Answer 2

我不太确定建议的解决方案@MaxWillmo会起作用，对象是通过引用复制的。会更新..因为它在弹出窗口中被更改了吗？

我想你可能想做'angular.copy（）'＆amp;制作所选用户的副本，然后在编辑完成后替换数组中的用户对象。

-Bhaskara

http://blog.liftoffllc.in/search/label/angularjs

AngularJS无需绑定即可获得表单输入

2 个答案: