實現在角

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>

其他的答案