[AngularJS 07] AngularJS CRUD Modal Bootstrap

 AngularJS CRUD Modal Bootstrap 

Kiến trúc code 

Video demo 

https://youtube.com/shorts/pOUs1ZZ5sDA

Khung trang index.html 

Toàn nội dung trang index.html 

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 = "";
   };

});