AngularJs Add Table Row
AngularJs Add Table Row – It is very easy to add/append a new row in table, Unlike jQuery or other framework you don’t need to put much effort to append new row in table. Here in this tutorial we are going to explain how you can add/append a new table row in AngularJs. You can use our online editor to edit and run the code online.
AngularJs Add Table Row | Append a New Row | Example | Demo
To append/add a new row in a table you don’t need to add the tr, td html tags to add new row. You can do it very easily if you have basic knowledge of AngularJs. You have to just update the object/array used in table. Let us create a simple example to understand this functionality.
AngularJs Add Table Row : Append Table Row 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.rows = ['Table Row 1', 'Table Row 2'];
$scope.counter = 2;
$scope.addNewRow = function() {
$scope.counter++;
$scope.rows.push('Table Row ' + $scope.counter );
};
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<table>
<tr><th>Sample Table</th></tr>
<tr ng-repeat="content in rows">
<td>{{content}}</td>
</tr>
</table><br>
<button ng-click='addNewRow()' >Add New Row</button>
</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
