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

我不太确定建议的解决方案@MaxWillmo 会起作用，对象是通过引用复制的，并且会得到更新.. 因为它在弹出窗口中发生了变化？

我认为您可能想要执行“angular.copy()”并复制所选用户，然后在编辑完成后替换数组中的用户对象。

-巴斯卡拉

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

于 2013-05-31T16:15:54.800 回答
0

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

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

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

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