实现在角

Question

取消编辑我有一个gridController as gc内NG重复，我用它来填充举表：

<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-重复后的DIV用于有条件地显示一组如果该任务的属性edit_active设置为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

似乎都不承认，在自定义指令，则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 2

我认为你的情况的答案是将模型从视图的双向绑定中分离出来，这意味着你应该创建一个服务来返回你的数据模型的重复，在视图中渲染，如果用户单击保存，则发送服务以更新任务，否则重新请求加载旧数据的任务。

Answer 3

当你开始编辑时，你可以创建一个数据的副本，然后你可以重置所有的值，当他们取消？

Answer 4

<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>

Answer 5

同时通过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>

其他的答案