Part 2 : Simple list example Add/Edit and Delete with Angular

in previous article we have learn Simple list example with Angular, now we will move next step on this tutorial.We will add functionality of add/edit and delete on grid listing.Angular provide very simple logic on behind add/edi and delete functionality, If you have knowledge of JSON object/Array then you can do it with in minute, you learn within five minute to add/edit and delete functionality on angular.

angular_complete

There are following steps to need follow to add crud functionality on Simple list example with Angular previous tutorial.I am assuming you have Part1 : Simple list example with Angular code and understanding.

You can also check other tutorial of angular,

Step 1: We will add add,edit and delete icon on table list.I am using bootstrap3 lib so here i am using class of bootstrap.

Select Code
1
2
3
4
<div class="btn-group">
                <button type="button" class="btn btn-default btn"><i class="glyphicon glyphicon-pencil"></i></button>  
                <button type="button" class="btn btn-default btn"><i class="glyphicon glyphicon-trash"></i></button> 
                </div>

Step 2: Now We will create add,edit and delete function in controller.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$scope.edit = function(id) {
           //search user and update it
            $scope.objectIndex = id;
            $scope.userObject = angular.copy($scope.userList[id]);
            console.log($scope.objectIndex);
        }
        
        $scope.save = function() {
            console.log($scope.objectIndex);
            if($scope.userList[$scope.objectIndex] == null) {
                //this is new record
                $scope.userList.push($scope.userObject);
            } else {
                //for existing record
                //and update it.
                    $scope.userList[$scope.objectIndex] = $scope.userObject;               
            }
             
            //clear the add record form
            $scope.userObject = {};
            $scope.objectIndex = '';
        }
        
        $scope.delete = function(id) {
            //search record with given id and delete it
            for(i in $scope.userList) {
                if($scope.userList[i].id == id) {
                    $scope.userList.splice(i,1);
                    $scope.newcontact = {};
                }
            }
             
        }

Step 3: Now we will call these method on click of icon on table list.

Select Code
1
2
3
4
<div class="btn-group">
                <button type="button" class="btn btn-default btn" ng-click="edit($index);"><i class="glyphicon glyphicon-pencil"></i></button>  
                <button type="button" class="btn btn-default btn" ng-click="delete();"><i class="glyphicon glyphicon-trash"></i></button> 
                </div>

I hope this help you.