In this tutorial I am going to explain how to we can create dynamic HTML table using AngularJS. Its quite common, Now a day we are using these kind of dynamic Table in many Application using core JavaScript, jQuery etc. But using AngularJS you can make dynamic Table very easily and less number of lines codes.
The idea behind this tutorial is to make a Table that is able to add rows on user requirement.
The Dynamic table Form that can.
- Allow user to add table rows(with data) as and when required.
- The added fields can also be removed by the user.
- Allow user to remove existing record from the table.
HTML
I have created one Form and given unique ng-model(ng-model="personalDetails.fname") name for each field. Created table with header and dynamic Table row value using ng-repeat. 'personalDetails' is the object which has fname, lname & email.
Created ng-submit (ng-submit="addNew(personalDetails)") to push the data to object.
<body ng-app="myapp" ng-controller="ListController">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form ng-submit="addNew(personalDetails)">
<div class="form-group">
<input type="text" class="form-control" placeholder="First name" ng-model="personalDetails.fname" required>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Last name" ng-model="personalDetails.lname" required>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" ng-model="personalDetails.email" required>
</div>
<div class="clearfix">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div><div class="row" ng-hide="!personalDetails.length">
<div class="col-md-12">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td>
<input type="checkbox" ng-model="personalDetail.selected"/></td>
<td>{{personalDetail.fname}}</td>
<td>{{personalDetail.lname}}</td>
<td>{{personalDetail.email}}</td>
</tr>
</tbody>
</table>
<div class="form-group">
<input type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
</div>
</div>
</div>
</div>
</body>
JavaScript
$scope.personalDetails is the object which store all personal details, There is three functions $scope.addNew, $scope.remove and $scope.checkAll.
var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.personalDetails = [
{
'fname':'Muhammed',
'lname':'Shanid',
'email':'shanid@shanid.com'
},
{
'fname':'John',
'lname':'Abraham',
'email':'john@john.com'
},
{
'fname':'Roy',
'lname':'Mathew',
'email':'roy@roy.com'
}];
$scope.addNew = function(personalDetails){
$scope.personalDetails.push({
'fname': personalDetails.fname,
'lname': personalDetails.lname,
'email': personalDetails.email,
});
$scope.PD = {};
};
$scope.remove = function(){
var newDataList=[];
$scope.selectedAll = false;
angular.forEach($scope.personalDetails, function(selected){
if(!selected.selected){
newDataList.push(selected);
}
});
$scope.personalDetails = newDataList;
};
$scope.checkAll = function () {
if (!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.personalDetails, function (personalDetails) {
personalDetails.selected = $scope.selectedAll;
});
};
}]);
Demo
