7

我需要为我正在从事的项目实施可编辑的列表。当您单击一个项目时，它会变为编辑状态，其中包含与您单击的项目相关的一系列选项。我们的用户体验希望这些项目可以在线编辑，但我不确定以角度方式执行此操作的最佳方式，并且想知道哪种方式更好。

示例 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}
  ]
});

第一种方法（此处的示例）是有一个 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;
  };
});

我想到的第二种方法（这里的例子）是将视图状态冲到对象上。我不喜欢这种方式，因为我不想修改 ng-repeat 交给我的对象。这种方法确实允许我处理上述第一种方式所没有的成功保存。

有没有更好的选择？

4

2 回答 2

4

如果您不想让对象与视图状态混淆，您可以将视图状态保存在不同的对象中。

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>
于 2013-09-13T05:20:52.057 回答
1

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

于 2014-03-01T05:40:51.823 回答