7

私が取り組んでいるプロジェクトの編集可能なリストを実装する必要があります。アイテムをクリックすると、クリックしたアイテムに関連する一連のオプションを持つ編集状態に変わります。私たちの UX はアイテムをインラインで編集することを望んでいますが、Angular でこれを行う最善の方法がわからず、どちらの方法が優れているかを知りたいです。

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

最初の方法 (例 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;
  };
});

私が考えた2 番目の方法 ( example here ) は、ビュー ステートをオブジェクトにダック パンチすることです。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-repeat の代わりにng-gridを試しましたか? それらには優れた編集インライン モデルがあり、ng-hide/ng-show オプションよりも優れた UX を備えているようです。

于 2014-03-01T05:40:51.823 に答える