HTML
<body ng-app="myApp" ng-controller="myController">
<div class="container">
<div class="row">
<div class="col-md-12">
<hr>
<h3 class="text-center">Angular JS Crud App</h3>
<hr>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<button class="btn btn-info pull-right" data-toggle="modal" data-target="#addModal">Add New</button>
<div class="alert alert-warning fade in myAlert" ng-if="alertMassege">
<a href="#" class="close" data-dismiss="alert" ng-click="clickedAlert()">×</a>
<h4>{{alertMassege}}</h4>
</div>
<table class="table table-bordered myTable">
<tr class="text-center" >
<th>Index</th>
<th>Name</th>
<th>Full Name</th>
<th>Email</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tbody>
<tr ng-repeat="user in users">
<td>{{$index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.fullname}}</td>
<td>{{user.email}}</td>
<td><button class="btn btn-warning" data-toggle="modal" data-target="#editModal" ng-click="selectUser(user)">Edit</button></td>
<td><button class="btn btn-danger" data-toggle="modal" data-target="#deleteModal" ng-click="selectUser(user)">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="container footer">
<div class="row">
<div class="col-md-12 text-center">
<p>Never, Never, Never Give Up <a href="https://m4mohaiman.github.io" target="_blank">Mohaiman</a>, 2016</p>
</div>
</div>
</div>
<!--Add Modal-->
<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add New</h4>
</div>
<div class="modal-body">
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="Name">Name</label>
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="Enter Name" ng-model="newUser.name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="full name">Full Name</label>
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="Enter Full Name" ng-model="newUser.fullname">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Full Name</label>
<div class="col-sm-3">
<input type="email" class="form-control" placeholder="Enter Email" ng-model="newUser.email">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="saveUser()" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--Edit Modal-->
<div class="modal fade" id="editModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit</h4>
</div>
<div class="modal-body">
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="Name">Name</label>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="clickedUser.name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="full name">Full Name</label>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="clickedUser.fullname">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email</label>
<div class="col-sm-3">
<input type="email" class="form-control" ng-model="clickedUser.email">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="updateUser()" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--Delete Modal-->
<div class="modal fade" id="deleteModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete</h4>
</div>
<div class="modal-body">
<h3>Are you sure to delete <span>{{clickedUser.fullname}}</span>????</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" ng-click="deleteUser()" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</body>
CSS
*{margin: 0; padding: 0;}
body{
font-family: 'Exo', sans-serif;
}
.myTable{
margin-top: 50px;
text-align: center;
}
.myAlert{
margin:0;
margin-top: 100px;
}
.table th{
text-align: center;
}
.alert h4{
margin: 0;
}
span{
color: red;
}
.footer{
padding-top: 235px;
}
JAVASCRIPT
var myApp = angular.module('myApp', []);
myApp.controller("myController", function($scope){
$scope.newUser = {};
$scope.clickedUser = {};
$scope.alertMassege = "";
$scope.users = [
{name : "Rashed", fullname : "Shuvro Nil", email : "rashed@mail.com"},
{name : "Javad", fullname : "Nazmul Hossian", email : "nazmul@mail.com"},
{name : "Lizu", fullname : "Sumona Sharmin", email : "lizu@mail.com"},
];
$scope.saveUser = function(){
$scope.users.push($scope.newUser);
$scope.newUser = {};
$scope.alertMassege = "New item add on list successfully!!";
};
$scope.selectUser = function(user){
console.log(user);
$scope.clickedUser = user;
};
$scope.updateUser = function (){
$scope.alertMassege = "Update Successfully!!";
};
$scope.deleteUser = function(){
$scope.users.splice($scope.users.indexOf($scope.clickedUser), 1);
$scope.alertMassege = "Deleted successfully!!";
};
$scope.clickedAlert = function(){
$scope.alertMassege = "";
};
});
