Общая форма, работающая над копией модели

Question

У меня есть форма для редактирования элементов, прикрепленных к корню на моем DOM. Моя страница содержит список этих элементов, а также ссылку для их редактирования.

Что такое чистый способ

1. Показать выбранный элемент в форме, когда его изменить ссылку щелкают
2. имеют вид работы на копию элемента так оригинал не изменяется время редактирует пользователь (и изменения могут быть отменены)
3. Сохранение формы обновляет элемент происхождения

Я играл с различными комбинациями $ rootScope, директив и услуг, но не еще есть рабочее решение, пусть идет по чистому.

Answer 1

Вот очень упрощенная форма редактирования, обрабатываемая контроллером. Используя angular.copy(object/array), вы можете работать с копией элемента. ng-submit=updateItem() в форме обновляет исходные свойства элемента со значениями из редактируемой копии

<ul> 
    <li ng-repeat="item in items"><button ng-click="editItem(item)">Edit</button>{{item.first}} {{item.last}} </li> 
</ul> 

<form ng-submit="updateItem()" ng-show="activeItem"> 
<h3>Edit Item</h3> 
    <div><input ng-model="editCopy.first" type="text"/></div> 
    <div><input ng-model="editCopy.last" type="text"/></div> 
    <div><input type="submit" value="Update"/></div> 
</form> 

app.controller('MainCtrl', function($scope) { 
    /* utility function*/ 
    var swapItemValues=function(from,to){ 
     for(key in from){ 
     to[key]=from[key]; 
     }  
    } 

    $scope.items=[{first:'SpongeBob', last:'SquarePants'} ]; 


    $scope.editItem=function(item){ 
     $scope.editCopy=angular.copy(item);  
     $scope.activeItem=item;/* reference to original item, used for form ng-show as well as to do update*/ 

    } 

    $scope.updateItem=function(){ 
     swapItemValues($scope.editCopy,$scope.activeItem); 
     $scope.activeItem=null;/* form `ng-show` only displays when there is an activeItem*/ 
    } 

}); 

DEMO: http://plnkr.co/edit/O52EIk9ops8UqIFmbqXw?p=preview

Слегка повышен DEMO с Undo редактирования на ОТМЕНА комментарий в вопросе

http://plnkr.co/edit/c7H7lYBTnd2P6ShK7Ela?p=preview

Answer 2

Вы можете настроить форму в первую очередь, используя привязки ngModel, указывающие на объект с теми же свойствами, что и тот, который вы редактируете. Таким образом, используя объект ниже, введите текстовое поле с ng-model='editObj.name'.

Если вся информация об элементах хранится в объекте JSON, вы можете просто выбрать часть этого пункта:

[ 
    { 
     "name":"Tim", 
     "country":"USA" 
    }, 
    { 
     "name":"second", 
     "country":"CA" 
    } 
] 

Затем передать этот второй элемент в новую область видимости OBJ:

$scope.editObjItem=angular.copy($scope.obj[1]); 

Затем вы можете отредактировать ад, а затем просто поместите его на место, когда нажата кнопка отправки, а затем вы можете загрузить данные на сервер, если хотите:

$scope.obj[1]=$scope.editObjItem; 

Если пользователь отменяет редактирование после внесения изменений, никакого вреда для исходного объекта не будет. Так я все равно буду обращаться с ним.