how to dynamically Add and Delete rows dynamically using angularjs?

Today, We want to share with you add and delete rows dynamically using angularjs.In this post we will show you add/remove input fields dynamically with angularjs, hear for Angularjs create table with add/delete row, from ng-repeat in object of objects we will give you demo and example for implement.In this post, we will learn about Add or Remove Table Rows Dynamically in AngularJS with an example.

add, edit delete table row using angularjs

HTML Code

index.html

     
    

        

            

                

                    

                        

                            

                                

                                    

                                        

                                        
Customer Firstname
                                        
Customer Lastname
                                        
Customer Email
                                    
                                
                                

                                    

                                        

                                            
                                        

                                            
                                        

                                            
                                        

                                            
                                    
                                
                            

                            

                                
                                
                            
                        
                    
                
            
        
    

Angularjs Code

app.js

var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
    $scope.customerDetails = [
        {
            'firstnm':'Bhavika',
            'lastnm':'Pethani',
            'email':'[email protected]'
        },
        {
            'firstnm':'Chirag',
            'lastnm':'Dethariya',
            'email':'[email protected]'
        },
        {
            'firstnm':'Kishan',
            'lastnm':'Ramanuj',
            'email':'[email protected]'
        }];
    
        $scope.addNew = function(customerDetail){
            $scope.customerDetails.push({ 
                'firstnm': "", 
                'lastnm': "",
                'email': "",
            });
        };
    
        $scope.remove = function(){
            var newDataList=[];
            $scope.selectedAll = false;
            angular.forEach($scope.customerDetails, function(selected){
                if(!selected.selected){
                    newDataList.push(selected);
                }
            }); 
            $scope.customerDetails = newDataList;
        };
    
    $scope.checkAll = function () {
        if (!$scope.selectedAll) {
            $scope.selectedAll = true;
        } else {
            $scope.selectedAll = false;
        }
        angular.forEach($scope.customerDetails, function(customerDetail) {
            customerDetail.selected = $scope.selectedAll;
        });
    };    
    
    
}]);

CSS code

style.css

.btn-primary{
    margin-right: 10px;
}
.container{
  margin: 20px 0;
}

Demo with Source code Add/Delete rows in table dynamically using Angular

I hope you get an idea about Add/Delete rows in table dynamically.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.