Angular ng-repeat 中的编辑模式答案

【问题标题】：Edit Mode inside Angular ng-repeatAngular ng-repeat 中的编辑模式
【发布时间】：2023-03-09 14:41:01
【问题描述】：

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

示例 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 交给我的对象。这种方法确实让我可以处理上述第一种方式无法成功的保存。

还有更好的选择吗？

【问题讨论】：

你的例子是空的plunkers
Grrr，一定没有保存。我将重做示例span>
看起来他们现在有问题，所以我只是将代码添加到我的问题中。

标签： angularjs angularjs-ng-repeat

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：