AngularJS CRUD Modal Bootstrap
Kiến trúc code
Video demo
Khung trang index.html
Toàn nội dung trang index.html
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcSxtLp2f3omX6-q39nfIvihU5cqVwkBMcElcrHOc6f1tk-qRICSIG90J5fpgYJIvV1adJtr0bRJd11cpNrdzXinW6yS4XNyZ20xlXZmtMHBSjRvvGO6WCm0Y-Z3elxo4FW8y7YV9Vb7f_iDmtC3BxsUHamuUwAuy5uhdWkrSdixmQKtfh01rfMg/s16000/AngularJS%20CRUD%20Modal%20Bootstrap%20index%203.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpf8_H6I6bjwrNyN3wrvGdAATXa39H-GUQm-5Ulq73iOhfjNM7RrL1iowNttqCbsmL2U1KNyL_dOc3lN-ljhRz4ChirtTNgGhFjxdfmzvCYoywgynAeEcpEtLARSsfht4QSnjShYVVHLQOrupo5ltSAcBcl0KcWMgFTvddiV2akSD3MTSFNxA4UA/s16000/AngularJS%20CRUD%20Modal%20Bootstrap%20index%204.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDOfXcZIQ5xUUHoncwCj04wHB0E3-9X9U-GY0IMhYvGfQk30jf53OiwoHF-U24_NGH5ZIx8eidWJGEXNJKh7jXL0dvM5FCfiiwhJWpltRvPo5VhYHxKQirheSeBZbrRiSMqEG6HnDOS1VXc8fVIj8imTnAUtu3YMF39le5ZwP8IrkQX0psTAABoQ/s16000/AngularJS%20CRUD%20Modal%20Bootstrap%20index%205.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIrjB9yA2D1OwRhYrf-mIEzimeY97miJJ_DT5qQrxhPuJfPFHr1I1Wa4RcgIyXeRTUL6w4fSpD5pqJGlXAPDbdkY8vagPMcN8ZXcUgV3pvCvi--SnprrPKTXFyX2aVheCW0tNULVteR9iVrnH2O1QKyJOSmtw57xuBcxCQL08oNibqsuUu6h30rA/s16000/AngularJS%20CRUD%20Modal%20Bootstrap%20index%207.png)
Code CSS style.css
.btn-group-sm>.btn, .btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 1.0rem;
}
.btn-info {
color: #d0eaf5;
background-color: #6286ea;
border-color: #ced4da;
}
Code Javascript app.js
// Code goes here
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
console.log("My controller.....");
$scope.users = [
{name: "Thi", email: "dangkimthi@gmail.com", fullname: "Dang Kim Thi"},
{name: "ThiDK", email: "thidk@gmail.com", fullname: "Thi DK"},
{name: "CodeLean", email: "codelean@gmail.com", fullname: "Code Lean"}
];
$scope.addUser = function(){
$scope.users.push($scope.newUser);
$scope.newUser = {};
$scope.message = "New User Added successfully";
};
$scope.selectUser = function(user){
console.log(user);
$scope.clickedUser = user;
};
$scope.editUser = function(){
$scope.message = "User Edited successfully";
};
$scope.deleteUser = function(){
$scope.users.splice($scope.users.indexOf($scope.clickedUser));
$scope.message = "User Deleted successfully";
};
$scope.clearMessage = function(){
$scope.message = "";
};
});
Đăng nhận xét