Today, We want to share with you add and delete rows dynamically using angularjs.In this post we will show you add/remove input fields dynamically with angularjs, hear for Angularjs create table with add/delete row, from ng-repeat in object of objects we will give you demo and example for implement.In this post, we will learn about Add or Remove Table Rows Dynamically in AngularJS with an example.
add, edit delete table row using angularjs
HTML Code
index.html
<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()">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
<th>Customer Firstname</th>
<th>Customer Lastname</th>
<th>Customer Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="customerDetail in customerDetails">
<td>
<input type="checkbox" ng-model="customerDetail.selected"/></td>
<td>
<input type="text" class="form-control" ng-model="customerDetail.firstnm" required/></td>
<td>
<input type="text" class="form-control" ng-model="customerDetail.lastnm" required/></td>
<td>
<input type="email" class="form-control" ng-model="customerDetail.email" required/></td>
</tr>
</tbody>
</table>
<div class="form-group">
<input ng-hide="!customerDetails.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
<input type="submit" class="btn btn-primary addnew pull-right" value="Add New">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
Angularjs Code
app.js
var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.customerDetails = [
{
'firstnm':'Bhavika',
'lastnm':'Pethani',
'email':'[email protected]'
},
{
'firstnm':'Chirag',
'lastnm':'Dethariya',
'email':'[email protected]'
},
{
'firstnm':'Kishan',
'lastnm':'Ramanuj',
'email':'[email protected]'
}];
$scope.addNew = function(customerDetail){
$scope.customerDetails.push({
'firstnm': "",
'lastnm': "",
'email': "",
});
};
$scope.remove = function(){
var newDataList=[];
$scope.selectedAll = false;
angular.forEach($scope.customerDetails, function(selected){
if(!selected.selected){
newDataList.push(selected);
}
});
$scope.customerDetails = newDataList;
};
$scope.checkAll = function () {
if (!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.customerDetails, function(customerDetail) {
customerDetail.selected = $scope.selectedAll;
});
};
}]);
CSS code
style.css
.btn-primary{
margin-right: 10px;
}
.container{
margin: 20px 0;
}
Demo with Source code Add/Delete rows in table dynamically using Angular
I hope you get an idea about Add/Delete rows in table dynamically.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.