HTML
<div ng-app="HelloWorldApp">
<div ng-controller="HelloWorldController">
<h1>{{greeting}}</h1>
</div>
</div>
JS
angular.module('HelloWorldApp', [])
.controller('HelloWorldController', function($scope) {
$scope.greeting = "Hello World";
});
See the Pen Inline row editing by Elvis (@mageddo) on CodePen.
Dep
css
//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
https://unpkg.com/ng-table/bundles/ng-table.min.css
js
//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js
https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js
https://unpkg.com/ng-table/bundles/ng-table.min.js
HTML
<div ng-app="myApp" class="container-fluid">
<div class="container">
<div ng-controller="demoController as demo">
<h3>ngTable directive</h3>
<form ng-submit="demo.saveNewLine(line)">
<table class="table table-bordered table-hover table-condensed " >
<colgroup>
<col width="65%" />
<col width="10%" />
<col width="15%" />
<col width="10%" />
</colgroup>
<tr>
<th><label class="control-label " for="name">Name<span class="asteriskField">*</span></label></th>
<th><label class="control-label requiredField" for="age">Age<span class="asteriskField">*</span></label></th>
<th><label class="control-label requiredField" for="money">Money<span class="asteriskField">*</span></label></th>
<th>Actions</th>
</tr>
<tr>
<td>
<input class="form-control" id="name" ng-model="line.name" type="text"/>
</td>
<td>
<input class="form-control" id="age" ng-model="line.age" type="number"/>
</td>
<td>
<input class="form-control" id="money" ng-model="line.money" type="number"/>
</td>
<td>
<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-save"></span></button>
</td>
</tr>
</table>
</form>
<table ng-table="demo.tableParams" class="table table-bordered table-hover table-condensed editable-table demoTable" ng-form="demo.tableForm" disable-filter="demo.isAdding" demo-tracked-table="demo.tableTracker">
<colgroup>
<col width="65%" />
<col width="10%" />
<col width="10%" />
<col width="15%" />
</colgroup>
<tr ng-repeat="row in $data" ng-form="rowForm" demo-tracked-table-row="row">
<td title="'Name'" filter="{name: 'text'}" sortable="'name'" ng-switch="row.isEditing" ng-class="name.$dirty ? 'bg-warning' : ''" ng-form="name" demo-tracked-table-cell>
<span ng-switch-default class="editable-text">{{row.name}}</span>
<div class="controls" ng-class="name.$invalid && name.$dirty ? 'has-error' : ''" ng-switch-when="true">
<input type="text" name="name" ng-model="row.name" class="editable-input form-control input-sm" required />
</div>
</td>
<td title="'Age'" filter="{age: 'number'}" sortable="'age'" ng-switch="row.isEditing" ng-class="age.$dirty ? 'bg-warning' : ''" ng-form="age" demo-tracked-table-cell>
<span ng-switch-default class="editable-text">{{row.age}}</span>
<div class="controls" ng-class="age.$invalid && age.$dirty ? 'has-error' : ''" ng-switch-when="true">
<input type="number" name="age" ng-model="row.age" class="editable-input form-control input-sm" required/>
</div>
</td>
<td title="'Money'" filter="{money: 'number'}" sortable="'money'" ng-switch="row.isEditing" ng-class="money.$dirty ? 'bg-warning' : ''" ng-form="money" demo-tracked-table-cell>
<span ng-switch-default class="editable-text">{{row.money}}</span>
<div class="controls" ng-class="money.$invalid && money.$dirty ? 'has-error' : ''" ng-switch-when="true">
<input type="number" name="money" ng-model="row.money" class="editable-input form-control input-sm" required/>
</div>
</td>
<td>
<button class="btn btn-primary btn-sm" ng-click="demo.save(row, rowForm)" ng-if="row.isEditing" ng-disabled="rowForm.$pristine || rowForm.$invalid"><span class="glyphicon glyphicon-ok"></span></button>
<button class="btn btn-default btn-sm" ng-click="demo.cancel(row, rowForm)" ng-if="row.isEditing"><span class="glyphicon glyphicon-remove"></span></button>
<button class="btn btn-default btn-sm" ng-click="row.isEditing = true" ng-if="!row.isEditing"><span class="glyphicon glyphicon-pencil"></span></button>
<button class="btn btn-danger btn-sm" ng-click="demo.del(row)" ng-if="!row.isEditing"><span class="glyphicon glyphicon-trash"></span></button>
</td>
</tr>
</table>
</div>
</div>
</div>
JS
angular.module("myApp", ["ngTable"]);
(function() {
"use strict";
angular.module("myApp").controller("demoController", demoController);
demoController.$inject = ["NgTableParams"];
function demoController(NgTableParams) {
var self = this;
var originalData = dataFactory();
self.tableParams = new NgTableParams({}, {
filterDelay: 0,
dataset: angular.copy(originalData)
});
self.cancel = cancel;
self.del = del;
self.save = save;
self.saveNewLine = saveNewLine;
//////////
function cancel(row, rowForm) {
var originalRow = resetRow(row, rowForm);
angular.extend(row, originalRow);
}
function del(row) {
_.remove(self.tableParams.settings().dataset, function(item) {
return row === item;
});
self.tableParams.reload().then(function(data) {
if (data.length === 0 && self.tableParams.total() > 0) {
self.tableParams.page(self.tableParams.page() - 1);
self.tableParams.reload();
}
});
}
function resetRow(row, rowForm){
row.isEditing = false;
rowForm.$setPristine();
//self.tableTracker.untrack(row);
return _.findWhere(originalData, function(r){
return r.id === row.id;
});
}
function save(row, rowForm) {
var originalRow = resetRow(row, rowForm);
angular.extend(originalRow, row);
}
function saveNewLine(line){
line = angular.copy(line);
line.id = new Date().getTime();
console.debug('m=saveNewLine, line=%o', line);
self.tableParams.settings().dataset.push(line);
self.tableParams.reload().then(function(data) {
if (data.length === 0 && self.tableParams.total() > 0) {
self.tableParams.page(self.tableParams.page() - 1);
self.tableParams.reload();
}
});
}
}
})();
(function() {
"use strict";
angular.module("myApp").run(configureDefaults);
configureDefaults.$inject = ["ngTableDefaults"];
function configureDefaults(ngTableDefaults) {
ngTableDefaults.params.count = 5;
ngTableDefaults.settings.counts = [];
}
})();
function dataFactory() {
return [{"id":1,"name":"Nissim","age":41,"money":454},{"id":2,"name":"Mariko","age":10,"money":-100},{"id":3,"name":"Mark","age":39,"money":291},{"id":4,"name":"Allen","age":85,"money":871},{"id":5,"name":"Dustin","age":10,"money":378},{"id":6,"name":"Macon","age":9,"money":128},{"id":7,"name":"Ezra","age":78,"money":11},{"id":8,"name":"Fiona","age":87,"money":285},{"id":9,"name":"Ira","age":7,"money":816},{"id":10,"name":"Barbara","age":46,"money":44},{"id":11,"name":"Lydia","age":56,"money":494},{"id":12,"name":"Carlos","age":80,"money":193}];
}