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

注意：这与这个问题不同，因为我不需要 a 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 回答