AngularJS 模型更新恢复到原始状态

Question

http://plnkr.co/edit/3UMwSK6H5VL0pZujL7Qh?p=preview

点击编辑然后取消。文本框不会消失。再次点击取消，它们就消失了。请告诉我为什么会这样。我为此失去了理智。

提前致谢。 :)

代码如下：

function SmartTableController($scope) {

    $scope.sortFunc = function (keyname) {
        $scope.sortType = keyname;
        $scope.reverse = !$scope.reverse;
    }

    $scope.editing = false;
    $scope.newField = {};

    
    $scope.editUsersTableFunc = function (user) {
        user.editing = true;
        $scope.newField = angular.copy(user);
        $scope.editing = $scope.usersTable.indexOf(user);       
    }

    $scope.saveField = function (user) {
        user.editing = false;
        $scope.newField = angular.copy(user);
        $scope.usersTable[$scope.editing] = $scope.newField;
    }

    $scope.resetFunc = function (user) {
        //$scope.newField = angular.copy(user);
        user.editing = false;
        $scope.usersTable[$scope.editing] = $scope.newField;
    }
    var OnEventChangeFunc = function () {
        $scope.lastItem = $scope.currentPage * $scope.itemsDisplayedPerPage;
        $scope.firstItem = $scope.lastItem - $scope.itemsDisplayedPerPage + 1;
        $scope.lastItem = $scope.lastItem > $scope.totalRecords ? $scope.totalRecords : $scope.lastItem;
       
    }
    $scope.itemsDisplayedPerPage = '5';
    $scope.currentPage = 1;

    $scope.$watch('itemsDisplayedPerPage', OnEventChangeFunc);
    $scope.$watch('currentPage', OnEventChangeFunc);

    $scope.usersTable =[{ firstName: "a", lastName: "b", emailId: "abc@efg.com", country: "US" },
    { firstName: "a", lastName: "b", emailId: "abc@efg.com", country: "US" },
    { firstName: "a", lastName: "b", emailId: "abc@efg.com", country: "US" }];
       
    
    $scope.totalRecords = $scope.usersTable.length;

   

 
    }


SmartTableController.$inject = ['$scope'];
angular.module('smartTable', ['angularUtils.directives.dirPagination']);
angular.module('smartTable').controller('SmartTableController', SmartTableController);

<!DOCTYPE html>
<html ng-app="smartTable">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.js"></script>
    
    <script src="dirPagination.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="SmartTableController">
    <div class="form-inline">
        <label>Search : </label>
        <input type="search" ng-model="search" class="form-control" placeholder="Enter text to search" />
    </div>
    <div st-table="usersTable">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Index</th>

                    <!--<th > First Name</th>-->
                    <th>
                        <a href="#" ng-click="sortFunc('firstName')">
                            First Name
                        </a>
                    </th>
                    <!--<th ng-click="sortType='lastName'"> Last Name</th>-->
                    <th>
                        <a href="#" ng-click="sortFunc('lastName')">
                            Last Name
                        </a>
                    </th>
                    <!--<th ng-click="sortType='emailId'"> Email Id</th>-->
                    <th>
                        <a href="#" ng-click="sortFunc('emailId')">
                            Email Id
                        </a>
                    </th>
                    <!--<th ng-click="sortType='country'"> Country</th>-->
                    <th>
                        <a href="#" ng-click="sortFunc('country')">
                            Country
                        </a>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr dir-paginate="user in usersTable | orderBy : sortType : reverse| filter : search | itemsPerPage : itemsDisplayedPerPage" current-page="currentPage">
                    <td>
                   {{$index + firstItem}}</td>
                    <td>
                        <input type="text" ng-if="user.editing" ng-model="user.firstName"/>
                        <span ng-if="!user.editing">{{user.firstName}}</span></td>
                    <td>
                        <input type="text" ng-if="user.editing" ng-model="user.lastName"/>
                        <span ng-if="!user.editing">{{user.lastName}}</span></td>
                    <td>
                        <input type="text" ng-if="user.editing" ng-model="user.emailId"/>
                        <span ng-if="!user.editing">{{user.emailId}}</span></td>
                    <td>
                        <input type="text" ng-if="user.editing" ng-model="user.country"/>
                        <span ng-if="!user.editing">{{user.country}}</span></
                    <td><input type="button" ng-if="!user.editing" class="btn btn-primary" ng-click="editUsersTableFunc(user)" value="Edit"/>
                        <input type="submit" ng-if="user.editing" ng-click="saveField(user)" value="Save" class="btn btn-primary" />
                    <input type="submit" ng-if="user.editing" ng-click="resetFunc(user);" value="Cancel" class="btn btn-primary" /></td>
                </tr>
            </tbody>
        </table>
       
    </div>
</body>
</html>

Answer 1

事情是这样的：

1) 当您单击 "Edit" 按钮时，它会触发 $scope.editUsersTableFunc(user)。在这里，当您将 user 作为参数传递时，您实际上传递了 $scope.usersTable 的元素。这是因为 index.html 中的 dir-paginate="user in usersTable"。所以在 editUsersTableFunc() 函数中 user 等于 $scope.usersTable[$scope.editing] 或等于 {firstName: "a", lastName: "b", emailId: "abc@efg.com", country: "US"} 换句话说。在这个函数的第一行，你写 user.editing = true;，因此现在写 $scope.usersTable[$scope.editing] = {firstName: "a", lastName: "b", emailId: "abc@efg.com", country: "US", editing: true}。注意这里是新属性editing:true。在下一步中，您将 THIS user 保存在 $scope.newField 中（复制它）。

你还在关注吗？=)

2) 现在当你点击 "Cancel" 按钮时，$scope.resetFunc() 触发。您还可以在此处传递 user。现在有属性 编辑：true (user.editing === true)。然后你写user.editing = false。是的，现在 inputs 必须消失...... 但是！之后你通过下一行重新分配你的 user：$scope.usersTable[$scope.editing] = $scope.newField;。是的，现在 user.editing 再次等于 true（如此显示），因为 $scope.newField 包含 user 和属性 编辑：正确.

3)第二次点击"Cancel"时，传入newuser作为参数.你实际上通过了 $scope.usersTable[$scope.editing] 并且在 步骤 2) 的最后变成了 $scope.newField。所以现在当你写 user.editing = false 时，你会写 $scope.newField.editing = false。并且有效。

希望你能得到它=)

这是我的 plunker 示例，说明如何修复它。我只改了 resetFunc:

$scope.resetFunc = function (user) {
    $scope.newField.editing = false;
    $scope.usersTable[$scope.editing] = $scope.newField;
}

AngularJS 模型更新恢复到原始状态

AngularJS model update reverting back to original

angularjs

angularjs-scope

model-binding

angularjs-ng-click