AngularJs update table row
AngularJs update table Row – Sometimes we need to edit/update table row in AngularJs. It is quite easy to update angulaJs Table rows. We have tried to create most common and simple example to understand how we can edit inline the row. Here in this tutorial we are going to explain and create an example to demonstrate- how you can update table rows in AngularJs. You can use our online editor to edit and run the code online.
AngularJs update table Row | Edit Row | Modify Row Example | Demo
It is very easy to edit table rows in AngularJs. Here we are going to create the edit/update functionality using the AngularJs. We will use two templates to show the editable rows and other for the editing the text.
Html Part:
Html part contains the following part –
AngularJs update table Row : Edit Inline Table Rows Example
<div ng-app="myApp">
<div ng-controller="myController">
<span style='color:green;font-weight:bold;'>{{message}}</span>
<table>
<tr><th>Name</th><th>Country</th></tr>
<tr ng-repeat="content in rows" ng-include="loadTemplate(content)">
</tr>
</table>
<script type="text/ng-template" id="view">
<td>{{content.name}}</td><td>{{content.country}}</td>
<td>
<button ng-click="editContent(content)">Edit</button>
</td>
</script>
<script type="text/ng-template" id="edit">
<td> <input type="text" ng-model="editablerow.name" /></td>
<td> <input type="text" ng-model="editablerow.country" /></td>
<td>
<button ng-click="saveData($index)">Save</button>
<button ng-click="reset()">Cancel</button>
</td>
</script>
</div>
</div>
|
Here we have created two templates – 1. – To display the table row. 2. Display edit mode of the row. Three functions are used here to edit, save and cancel functionality which we have defined in javascript part. Now let us see the javascript part.
Javascript Part:
JavaScript part contains the following part –
AngularJs update table Row : Edit Inline Table Rows Example
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.editablerow = '';
$scope.rows = [{'id':11, 'name':'John','country':'USA'}, {'id':10, 'name':'Kelly','country':'Australia'}, {'id':1, 'name':'Rimmy','country':'India'}, {'id':101, 'name':'Kat','country':'Serbia'}, {'id':190, 'name':'Yesha','country':'Srilanka'}, {'id':189, 'name':'Robert','country':'India'}];
$scope.editContent = function(content) {
$scope.editablerow = angular.copy(content);
}
$scope.loadTemplate = function(content) {
if (content.id === $scope.editablerow.id) return 'edit';
else return 'view';
}
$scope.saveData = function (indx) {
$scope.rows[indx] = angular.copy($scope.editablerow);
$scope.reset();
};
$scope.reset = function(){
$scope.editablerow = [];
}
});
</script>
|
This part contains the definition of the functions used in edit, save and cancel functionality.
Complete Part : JavaScript & Html Example
Now let us combine the both parts to create a full working example –
AngularJs update table Row : Edit Inline Table Rows Example
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.editablerow = '';
$scope.rows = [{'id':11, 'name':'John','country':'USA'}, {'id':10, 'name':'Kelly','country':'Australia'}, {'id':1, 'name':'Rimmy','country':'India'}, {'id':101, 'name':'Kat','country':'Serbia'}, {'id':190, 'name':'Yesha','country':'Srilanka'}, {'id':189, 'name':'Robert','country':'India'}];
$scope.editContent = function(content) {
$scope.editablerow = angular.copy(content);
}
$scope.loadTemplate = function(content) {
if (content.id === $scope.editablerow.id) return 'edit';
else return 'view';
}
$scope.saveData = function (indx) {
$scope.rows[indx] = angular.copy($scope.editablerow);
$scope.reset();
};
$scope.reset = function(){
$scope.editablerow = [];
}
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<span style='color:green;font-weight:bold;'>{{message}}</span>
<table>
<tr><th>Name</th><th>Country</th></tr>
<tr ng-repeat="content in rows" ng-include="loadTemplate(content)">
</tr>
</table>
<script type="text/ng-template" id="view">
<td>{{content.name}}</td><td>{{content.country}}</td>
<td>
<button ng-click="editContent(content)">Edit</button>
</td>
</script>
<script type="text/ng-template" id="edit">
<td> <input type="text" ng-model="editablerow.name" /></td>
<td> <input type="text" ng-model="editablerow.country" /></td>
<td>
<button ng-click="saveData($index)">Save</button>
<button ng-click="reset()">Cancel</button>
</td>
</script>
</div>
</div>
</body>
</html>
|
Now everything is ready just run the above example to see the demo. If you run the above example it will produce the output something like this –
Advertisements
