javascript - 如何在 Angular js 中维护旧值

Question

我已经在 angular js 中创建了可编辑的网格。

我面临的问题是如果用户单击编辑并更改值然后取消编辑。它使用 ng-model 将默认行为的范围更新为 m

但我想保留旧状态，以防万一用户尝试取消我可以在网格中设置旧值

查看

<tr ng-repeat="course in courses">
                <td>
                    <span>{{course.id}}</span>
                </td>
                <td> 
                    <span ng-show="course.editMode == null || course.editMode == false">{{course.number}}</span>
                    <input class ="form-control"  ng-model="course.number" ng-show="course.editMode == true" />
                </td>
                <td>
                    <span ng-show="course.editMode == null || course.editMode == false">{{course.name}}</span>
                    <input class="form-control"  ng-model="course.name" ng-show="course.editMode == true" />
                </td> 
<div class="btn-group">
               <i ng-click="updateCourse(course)"></i>                              
        <i ng-click="cancelEditMode(course)"></i>
                        </div>

Controller

$scope.courses = [];
 var oldvalue = '';
 $scope.toggleEditMode = function (course) {       
    course.editMode = true;
    oldvalue = course;
};
 $scope.cancelEditMode = function (course) {
    course.editMode = false;
    var index= $scope.courses.indexOf(course);
    $scope.courses[index] = oldvalue;              
};

我曾尝试使用一个变量旧值，当用户单击编辑时，我将现有值保存在旧值中，然后在取消时尝试设置旧值。但它没有用，我总是在旧值中获得新值。

有人可以帮助我解决我做错的问题吗？

Answer 1

您应该创建对象的副本作为旧值。您可以使用 angular.copy方法。否则，您正在对同一个对象进行操作，对此对象的任何更新也会更改旧值。这是一个 working example在 plunker 中。

您在 cancelEditMode 方法中有第二个错误，因为您在要替换的对象中将 editMode 属性设置为 false。这也在示例中得到修复。