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

<body ng-app="myapp" ng-controller="ListController">     
    <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>Customer Firstname</th>
                                        <th>Customer Lastname</th>
                                        <th>Customer Email</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="customerDetail in customerDetails">
                                        <td>
                                            <input type="checkbox" ng-model="customerDetail.selected"/></td>
                                        <td>
                                            <input type="text" class="form-control" ng-model="customerDetail.firstnm" required/></td>
                                        <td>
                                            <input type="text" class="form-control" ng-model="customerDetail.lastnm" required/></td>
                                        <td>
                                            <input type="email" class="form-control" ng-model="customerDetail.email" required/></td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="form-group">
                                <input ng-hide="!customerDetails.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>

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

Read Also:  Group By with Count using Laravel Collection

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Nested Queries Subqueries in SQL Example
  2. Read Also:  Add custom text to image in Laravel with Example
  3. Read Also:  Group By Preserve Key using Laravel Collection
  4. Read Also:  AngularJS Adding Form Fields Dynamically with PHP MySQLi
  5. Read Also:  Add or Remove Table Rows Dynamically in AngularJS
  6. Read Also:  How to add Bootstrap Tooltip Plugin Example
  7. Read Also:  Group By with Multiple Columns using Laravel Collection
  8. Read Also:  Get Radio Button value using AngularJS
  9. Read Also:  Group By with Date using Laravel Collection
  10. Read Also:  Laravel Get Route Parameters in middleware Example
CLOSEX