Реализация отменить редактирование в угловых

Question

У меня есть нг-повтор внутри gridController as gc, который я использую для заполнения 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> 

В DIV после нг-повтора используется условно показан набор кнопок, если эта задача имеет свойство edit_active, установленное на true. Если это свойство истинно, ng-class добавляет пользовательский класс active к строке, и я использую css для создания этой строки как редактируемой, если она имеет класс active.

У меня есть пользовательский директиву 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>