Edit Mode inside Angular ng-repeat

Question

I have a requirement to implement an editable list for a project I am working on. When you click on an item it changes to an edit state that has a bunch of options related to the item you clicked on. Our UX wants the items to be edited in-line but I am not sure of the best way to do this in angular and would like to know which way is better.

Example 1 Template

<div class="person" ng-repeat="person in people" ng-click="editing=!editing">
    <div class="details-view" ng-hide="editing" ng-bind="person.name"></div>
    <div class="edit-view" ng-show="editing">
      <input type="text" /> <button type="button">Save</button> <a>Cancel</a>
    </div>
</div>

Example 1 Controller

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.people = [
    {name: 'Joe', age:23},
    {name: 'Jim', age:32},
    {name: 'Jill', age:13}
  ]
});

The first way (example here) is to have an ng-repeat and inside of each ng-repeat item create an edit mode that is specific to the ng-repeat item. This works great but I don't want to leave edit mode until I have a successful response from the server and I don't understand how to handle that using this method.

Example 2 Template

<div class="person" ng-repeat="person in people" ng-click="toggleEditing(person)">
    <div class="details-view" ng-hide="person.editing" ng-bind="person.name"></div>
    <div class="edit-view" ng-show="person.editing">
      <input type="text" /> <button type="button">Save</button> <a>Cancel</a>
    </div>
</div>

Example 2 Controller

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.people = [
    {name: 'Joe', age:23},
    {name: 'Jim', age:32},
    {name: 'Jill', age:13}
  ];

  $scope.toggleEditing = function(person) {
    person.editing = !person.editing;
  };
});

The second way (example here) I thought of is to duck punch the view state onto the object. I don't like this way because I don't want to modify the object handed to me by the ng-repeat.This method does allow me to handle the successful save that the first way above doesn't.

Are there any better options?

Answer 1

If you don't want to clutter the object with the view state, you can save the view state in an different object.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.editedItems = {};

  $scope.people = [
    {name: 'Joe', age:23},
    {name: 'Jim', age:32},
    {name: 'Jill', age:13}
  ];

  $scope.toggleEditing = function(person) {
    $scope.editedItems[person.name] = 
    !$scope.editedItems[person.name] || true;
  };
});

HTML

<div class="person" ng-repeat="person in people" ng-click="toggleEditing(person)">
            <div class="details-view" ng-hide="editedItems[person.name]" ng-bind="person.name"></div>
            <div class="edit-view" ng-show="editedItems[person.name]">
                <input type="text" /> <button type="button">Save</button> <a>Cancel</a>
            </div>
        </div>