Question

我在gridController as gc中有一个 ng-repeat ，用于填充Bootstrap表：

<div ng-repeat="(id, task) in gc.modelFilter(model.getModelAsDict())">
  <div ng-show="model.getTask(id).edit_active" class="row">
    <div class="col-sm-12">
      <button type="button" class="btn btn-danger" ng-click="showDeleteModal(id)">Delete</button>
      <button type="button" class="btn btn-default" ng-click="gc.save(task)">Save</button>
      <button type="button" class="btn btn-default" ng-click="gc.cancel(task)">Cancel</button>
   </div>
  </div>
  <div class="row datacell" ng-class="{'active': model.getTask(id).edit_active}">
    <div class="col-sm-1"><p contenteditable="true" ng-model="task.case_name"></p></div>
    <div class="col-sm-1"><p contenteditable="true" ng-model="task.title"></p>
    ....
  </div>
</div>

ng-repeat之后的div用于有条件地显示一组按钮，如果该任务的属性edit_active设置为true。如果该属性为true，则 ng-class 会向该行添加自定义类active，如果该行具有active类，则使用css将该行设置为可编辑的样式。

我有contenteditable的自定义指令：

app.directive("contenteditable", function() {

  return {

  restrict: "A",
  require: "ngModel",
  link: function(scope, element, attrs, ngModel) {

    function read() {
      ngModel.$setViewValue(element.html());
    }

    ngModel.$render = function() {
      element.html(ngModel.$viewValue);
    };

    element.bind("blur keyup change", function() {
      scope.$apply(read);
    });

    function setRowActive(id) {
      scope.model.getTask(id).edit_active = true;
    }

    element.bind("click", function() {
      console.log('editing row id ' + scope.id);
      scope.$apply(setRowActive(scope.id));
    });
  }
};

}）;

这一切都很好，因为它允许用户单击Bootstrap行并编辑值。保存过程很简单。但是我试图确定如何实现取消过程。如果用户点击了一行并编辑了一个字段。

当我到达gc.cancel()函数时，模型值已更新，我所拥有的是更改的值。如何恢复原始值？

Answer 1

我认为您的情况的答案是将模型与视图形式的双向绑定分开，这意味着您应该创建一个服务，返回您显示和呈现的数据模型的重复在视图中，如果用户单击“保存”，则发送服务以更新任务，否则您将重新请求加载旧数据的任务。

Answer 2

开始编辑时，是否可以创建数据副本，然后可以在取消时重置所有值？

Answer 3

将id和task传递给edit函数和cancel函数

function gridController (){
 // your code here
  gc.editing_tasks = {}
  gc.edit = function(task, id){
    gc.editing_tasks.id = task // so if you are editing multiple task at a time, all of them can save here

    // you can use sessionStorage or localStorage instead of saving in an object (I prefer that)
  }
  
  gc.cancel = function (id, task){
    task = gc.editing_tasks.id
    
    delete gc.editing_tasks.id // no more needed
  }
 // your code here
}

替代方式

function gridController (){
 // your code here
  gc.editing_tasks = {}
  gc.edit = function(task, id){
    gc.editing_tasks.id = task // so if you are editing multiple task at a time, all of them can save here

    // you can use sessionStorage or localStorage instead of saving in an object (I prefer that)
  }
  
  gc.cancel = function (index){
    gc.modelFilter[index] = gc.editing_tasks.id //taking gc.modelFilter as your ng-repeated array
    
    delete gc.editing_tasks.id // no more needed
  }
 // your code here
}

<button type="button" class="btn btn-default" ng-click="gc.cancel($index)">Cancel</button>

Answer 4

其他答案似乎都没有认识到在自定义指令中ngModelController可用 - 它保留了先前的值。因此，仅执行一次保存到下划线前缀属性允许将初始值保存在对象上。如果取消编辑，可以检查前缀属性。

read()函数如下所示：

   function read() {
     // capture old value and save as __property
     var property_name = '__' + attrs.ngModel.split('.')[1];
     // if no prior property exists, add it
     if (!scope.task.hasOwnProperty(property_name)) {
       scope.task[property_name] = ngModel.$$lastCommittedViewValue;
     }

     ngModel.$setViewValue(element.html());
   }

因此，如果编辑了task.title，则会将先前值保存为task.__title

Answer 5

似乎没有“开箱即用”的方式来取消编辑（近4年，Angular 9）

您需要在某处复制原始状态，并在用户单击“取消”时恢复其原始状态-正如Jay指出的那样

Answer 6

<md-button class="md-raised md-primary md-fab md-mini" ng-click="vm.detail($event, item)">
  <md-tooltip>
    EDIT
  </md-tooltip>
  <md-icon>edit</md-icon>
</md-button>
<md-button class="md-raised md-warn" ng-click="vm.cancel()">Cancel</md-button>

在Angular中实现取消编辑

6 个答案: