如何不通过 contenteditable 在 Angular Smart Table 中编辑项目

Question

如何在 Angular Smart Table 中编辑整个项目（json 对象）？请参阅下面我正在尝试做的事情的片段，请注意该对象可以有更多的属性，这就是为什么我调用有效的方法 "tedious" 并更喜欢更简单的方法。现场示例： Example

我是否还需要将 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，只是想知道如何进行基本更新。

Answer 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>

plunker

如何不通过 contenteditable 在 Angular Smart Table 中编辑项目

How to edit an item in Angular Smart Table not via contenteditable

angularjs

smart-table