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

Question

How can I edit an entire item (json object) in Angular Smart Table? See below for snippets of what I am trying to do, and please note that the object can have several more properties, which is why I'm calling the approach that works "tedious" and prefer the simpler method. Live example: Example

Do I need to also set the newItem to be the respective item in the displayedItems as well? Hopefully not b/c that feels like a workaround.

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

Note: this is different from this question because I don't need a contenteditable, just wondering how to do a basic update.

Answer 1

The easiest is to update the item without changing the reference (using angular.extend)

controller

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

markup

<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