Question

我在角度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>

控制器

$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;              
};

我试图有一个变量oldvalue，当用户点击编辑时，我在oldvalue中保存现有值，然后在取消时我尝试设置oldvalue。但它没有用，我总是在oldvalue中获得新的价值。

有人可以帮助我做错吗？

Answer 1

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

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

Answer 2

那是因为course是一个对象，当你将一个对象分配给某个变量时，该变量只会保存对该对象的引用。因此，当您更改原始对象（course）时，oldvalue会反映更改。

您需要制作原始course对象的副本：

...
oldValue = angular.copy(course);
...

如何在Angular js中维护旧值

2 个答案: