2014-12-25 3 views
-2

У меня есть этот plunkr here, который отображает редактируемый стол.Как вернуться к предыдущему состоянию модели, делающей ее грязной с помощью кнопки отмены

Ниже приведен HTML-код для таблицы:

<body ng-controller="MainCtrl"> 
    <table style="width:100%"> 
    <tr> 
    <th>Name</th> 
    <th>Is enabled?</th>   
    <th>Points</th> 
    </tr> 
    <tr ng-repeat="fooObject in fooObjects | orderBy:'points'"> 
    <td><input ng-model="fooObject.name" ng-disabled="fooState!='EDIT'"/></td> 
    <td><input ng-model="fooObject.isEnabled" ng-disabled="fooState!='EDIT'"/></td>  
    <td><input ng-model="fooObject.points" ng-disabled="fooState!='EDIT'"/></td> 
    <td> 
     <a href="#" ng-click="handleEdit(fooObject, 'EDIT', $index)">Edit</a> 
     <a href="#" ng-click="handleEditCancel(fooObject, 'VIEW', $index)">Cancel</a> 
    </td> 
    </tr> 
</table> 
    </body> 

Я хотел бы, Cancel ссылка в строке отображается предыдущее состояние fooObject, как если бы эта строка не была затронута.

Ниже приводится код в контроллере AngularJS, который, кажется, работает до тех пор, как я не "orderBy:'points'" в выражении ng-repeat, но не работает иначе:

app.controller('MainCtrl', function($scope) { 
    $scope.fooObjects = [ 
    {"name": "mariofoo", "points": 65, "isEnabled": true}, 
    {"name": "supermanfoo", "points": 47, "isEnabled": false}, 
    {"name": "monsterfoo", "points": 85, "isEnabled": true} 
    ]; 

    $scope.fooState = 'VIEW'; 

    $scope.originalFooObject = null; 
    $scope.handleEdit = function(fooObject, fooState, index){ 
     $scope.originalFooObject = angular.copy(fooObject); 
     $scope.fooObject = fooObject; 
     $scope.fooState = fooState; 
    } 

    $scope.handleEditCancel=function(fooObject, fooState, index){ 
     $scope.fooObjects[index] = $scope.originalFooObject; 
     $scope.originalFooObject=null; 
     $scope.fooState = fooState; 
    } 


}); 

Может кто-нибудь помочь мне понять, как решить проблему?

+0

Этот вопрос не показывает каких-либо исследований усилия; это непонятно или не полезно? В самом деле? Прошу вас посоветоваться по полезной ссылке, поскольку я не смог найти решение, разрешающее данную проблему. Скажите, пожалуйста, что не было понято в вопросе? Спасибо. – skip

+3

Я думаю, люди реагируют на ваше последнее предложение. Обычно хорошие вопросы показывают некоторые усилия и конкретную проблему. У вас есть часть этого в плункер, но вы должны принести соответствующие части и опубликовать их в самом вопросе. –

+0

@NewDev: Да, это может быть проблемой. Я действительно думал, что это сэкономит время на решение этой проблемы. Я обновил сообщение. Благодарю. – skip

ответ

5

Вы были правы в использовании мастера/копии объекта. Но вы восстанавливаете исходное значение вне контекста вашей редактируемой строки. И так, это не работает с orderBy, потому что orderBy меняет индекс, и вы заканчиваете обновление (а не сброс) другого элемента. Но это не сработает даже без «orderBy»: попробуйте отредактировать одну строку, но удалите ее по другой. Понимаете, почему это не работает?

Существует несколько способов сделать это. Например, ваш fooObjects может содержать копию каждой строки при редактировании:

$scope.handleEdit = function(fooObject){ 
    fooObject.$original = fooObject.$original || angular.copy(fooObject); 
    $scope.fooState = "EDIT"; 
} 

$scope.handleEditCancel = function(fooObject){ 
    angular.copy(fooObject.$original, fooObject); 
    $scope.fooState = "VIEW"; 
} 

(обратите внимание, как вам не нужно index)

Вот ваш обновленный plunker

+0

Ты абсолютно прибил его. Благодаря :) – skip