1

Angular Smart Tableでアイテム全体(jsonオブジェクト)を編集するにはどうすればよいですか? 私がやろうとしていることのスニペットについては以下を参照してください。オブジェクトにはさらにいくつかのプロパティがある可能性があることに注意してください。実際の例: 例

newItemもそれぞれの項目に設定する必要がありdisplayedItemsますか? 回避策のように感じられる b/c ではないことを願っています。

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

app.controller('MainCtrl', function($scope) {

  $scope.rawItems = [{ title: 'blue' }, { title: 'green' }];
  $scope.displayedItems = [].concat($scope.rawItems);

  $scope.editTediousButWorks = function(e, index) {
    e.preventDefault();

    var item = $scope.rawItems[index];

    var newTitle = prompt("What is new value?", item.title);
    var newItem = { title: newTitle };

    item.title = newTitle;
  };

  $scope.editSimpleButBroken = function(e, index) {
    e.preventDefault();

    var item = $scope.rawItems[index];

    var newTitle = prompt("What is new value?", item.title);
    var newItem = { title: newTitle };

    item = newItem; // if you look at the rendered rows, nothing gets updated
  };
});

注：基本的な更新を行う方法を知りたいだけなので、これは必要ないため、この質問とは異なります。contenteditable

4

1 に答える 1

1

最も簡単なのは、参照を変更せずにアイテムを更新することです (angular.extend を使用)。

コントローラ

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.rawItems = [{ title: 'blue' }, { title: 'green' }];

  // add to rawItems, see that it renders successfully in the table
  $scope.rawItems.push({ title: 'orange' });


  $scope.edit = function(item) {

    var newTitle = prompt("What is new value?", item.title);
    //update the REFERENCE
    angular.extend(item, {title:newTitle});
  };
});

マークアップ

<table st-table="displayedItems" st-safe-src="rawItems" class="table table-striped">
      <tbody>
        <tr ng-repeat="item in displayedItems">
          <td>{{item.title}}</td>
          <td><a href="#" ng-click="edit(item)">Edit</a></td>
        </tr>
      </tbody>      
</table>

プランカー

于 2015-07-01T04:38:49.137 に答える