AngularJS: Inline editable table

Inline editing table data with cancel/undo (using ng-include)

by Sajeetharan Sinnathurai

HTML

<script src="https://cdn.rawgit.com/esvit/ng-table/v0.6.0/dist/ng-table.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/esvit/ng-table/v0.6.0/dist/ng-table.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
 
  <body ng-app="myApp" controller="myCtrl as vm">
{{8+7}}
<table ng-table="vm.tableParams" class="table" show-filter="true">
  <tbody>
    <tr ng-repeat="user in vm.data">
      <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
        {{user.name}}</td>
      <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
        {{user.age}}</td>
    </tr>
  </tbody>
</table>
</body>

JavaScript

var app =angular.module("myApp", ["ngTable"]);
 
app.controller('myCtrl',function($scope,NgTableParams){
var vm = this;
vm.data = [{name: "Moroni", age: 50},{name: "Moroni", age: 50},{name:"Moroni", age: 50}];
vm.tableParams = new NgTableParams({}, { dataset: vm.data});
});