Angularjs 编辑模式内的角度重复

我有一个为我正在工作的项目实现可编辑列表的要求。当您单击某个项目时，它将变为编辑状态，该状态具有一系列与您单击的项目相关的选项。我们的用户体验希望在线编辑项目，但我不确定以角度编辑的最佳方式，我想知道哪种方式更好

示例1模板

<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>

<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>

第一种方法（）是让一个ng repeat，在每个ng repeat项的内部创建一个特定于ng repeat项的编辑模式。这非常有效，但我不想离开编辑模式，直到我从服务器获得成功的响应，我不知道如何使用此方法处理

示例2模板

<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>

<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>

我想到的第二种方法（）是将视图状态嵌入到对象上。我不喜欢这种方式，因为我不想修改ng-repeat交给我的对象。这种方法确实允许我处理上面第一种方法无法成功保存的对象

---

有更好的选项吗？

如果不想让对象与视图状态混淆，可以将视图状态保存在其他对象中

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

保存取消

您是否尝试过，而不是重复？他们有一个很好的在线编辑模型，它似乎比ng hide/ng show选项有更好的用户体验。

您的示例是空的PlunkersGRR，一定没有保存。我会重做示例书，就像他们现在有问题一样，所以我只是在问题中添加了代码。

<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>