I have written Dynamic Table with HTML Form using AngularJS, This tutorial also similar, But you can make dynamic Table without having addition form outside of the Table. Bind the values in Table column which has HTML fields. Add, Edit and Remove values using in-line Form.
The idea behind this tutorial is same as Dynamic Table with HTML Form using AngularJS.
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 edit existing record from the table in-line form.
- Allow user to remove existing record from the table.
HTML
Created Table with header and dynamic Table row with Fields 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()">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td>
<input type="checkbox" ng-model="personalDetail.selected"/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.fname" required/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.lname" required/></td>
<td>
<input type="email" class="form-control" ng-model="personalDetail.email" required/></td>
</tr>
</tbody>
</table><div class="form-group">
<input ng-hide="!personalDetails.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>
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
