Source Code

Insert, Update and Delete in AngularJS – CRUD Operation

Dynamically Add/Remove rows in HTML table using Angularjs

we may also need to create dynamically one or more new rows on demand from code.This demo shows how to add a table row dynamically.

Firstname Lastname Email

Example : index.html


 <!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myapp" ng-controller="liveCtrl">     
    <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 ClientDetails">
                                        <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="!ClientDetails.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>
</html>

Example : App.js


var app = angular.module("myapp", []);
app.controller("liveCtrl", ['$scope', function($scope) {
    $scope.ClientDetails = [
        {
            'fname':'Modi',
            'lname':'Sachin',
            'email':'Modi@Sachin.com'
        },
        {
            'fname':'Rahul',
            'lname':'Gandhi',
            'email':'Rahul@Gandhi.com'
        },
        {
            'fname':'Ravi',
            'lname':'Dhameliya',
            'email':'Ravi@Dhameliya.com'
        }];
    
        $scope.addNew = function(personalDetail){
            $scope.ClientDetails.push({ 
                'fname': "", 
                'lname': "",
                'email': "",
            });
        };
    
        $scope.remove = function(){
            var newDataList=[];
            $scope.selectedAll = false;
            angular.forEach($scope.ClientDetails, function(selected){
                if(!selected.selected){
                    newDataList.push(selected);
                }
            }); 
            $scope.ClientDetails = newDataList;
        };
    
    $scope.checkAll = function () {
        if (!$scope.selectedAll) {
            $scope.selectedAll = true;
        } else {
            $scope.selectedAll = false;
        }
        angular.forEach($scope.ClientDetails, function(personalDetail) {
            personalDetail.selected = $scope.selectedAll;
        });
    };    
    
    
}]);