Question

我需要为我正在处理的项目实现可编辑列表。当您单击某个项目时，它将更改为编辑状态，该状态包含与您单击的项目相关的一系列选项。我们的用户体验需要在线编辑项目，但我不确定以角度方式执行此操作的最佳方法，并且想知道哪种方式更好。

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

示例1控制器

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

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

第一种方式（example here）是在每个ng-repeat项目中进行ng-repeat和内部创建特定于ng-repeat项目的编辑模式。这很好但我不想离开编辑模式，直到我从服务器得到一个成功的响应，我不明白如何使用这种方法处理它。

示例2模板

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

示例2控制器

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;
  };
});

我想到的第二种方式（example here）是将视图状态打到对象上。我不喜欢这种方式，因为我不想修改ng-repeat给我的对象。这个方法允许我处理上面第一种方法没有的成功保存。

还有更好的选择吗？

Answer 1

如果您不希望使用视图状态来混淆对象，则可以将视图状态保存在其他对象中。

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>

Answer 2

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

在Angular ng-repeat内编辑模式

2 个答案: