<body ng-app="myapp" ng-controller="TestController">
<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>
var app = angular.module("myapp", []);
app.controller("TestController", ['$scope', function($scope) {
$scope.personalDetails = [
{
'fname':'Istiaq',
'lname':'hossain',
'email':'hossain@shanid.com'
},
{
'fname':'riyad',
'lname':'uddin',
'email':'john@john.com'
},
{
'fname':'Saify',
'lname':'Uddin',
'email':'roy@roy.com'
}];
$scope.addNew = function(personalDetail){
$scope.personalDetails.push({
'fname': "",
'lname': "",
'email': "",
});
};
$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(personalDetail) {
personalDetail.selected = $scope.selectedAll;
});
};
}]);
Comments
Post a Comment