实现在角
取消编辑我有一个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()函数时，模型值已更新，我拥有的是已更改的值。我如何恢复原始值？
似乎都不承认，在自定义指令，则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
我认为你的情况的答案是将模型从视图的双向绑定中分离出来，这意味着你应该创建一个服务来返回你的数据模型的重复，在视图中渲染，如果用户单击保存，则发送服务以更新任务，否则重新请求加载旧数据的任务。
这可能会起作用，但它意味着复制整个模型。在我的代码中有很多列和大量的行。 – timbo
比你应该实现分页，并一次复制X行 – bresleveloper
这是如何完成的eveywhere – bresleveloper
当你开始编辑时，你可以创建一个数据的副本，然后你可以重置所有的值，当他们取消？
<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>
同时通过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>
在指令只能复制模型和恢复取消。如果你可以考虑将你的指令移动到一个组件上（你应该这样做），你可以使用$ onChanges钩子的一种数据绑定方式 – gyc