Add or Remove Table Rows Dynamically in AngularJS

Add or Remove Table Rows Dynamically in AngularJS

In this Post We Will Explain About is Add or Remove Table Rows Dynamically in AngularJS With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to angularjs dynamically add row Example

In this post we will show you Best way to implement angularjs add edit delete example, hear for add and delete rows dynamically using angular 2 with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

In this Example,First of all Add or Inluce External Libs Like as a(jQuery, css etc..), and then create a simple index.php or index.html page.After that crate a simple javascript file like as a index.js or main.js, It is also add your web-application First Header Part to some priorty set.After that Include your relavant CSS Class.

AngularJS – Adding/Removing Table Rows Dynamically

Using simple AngularJS looping ng-repeat directive, We can simple and easy way to bind JSON data array data to an view HTML table display. We can use the all the same table to do insert update and delete some simple CRUD operations, like as a adding table row or removing tabale data.

Include External Libs

index.html

    

        

            
Teacher Name
            

        
        

            
Name of Teacher
            

        
        

            
 Add Row 
        

        
        
 
            

                
Code
                    
Teacher Name
                        
Teacher
            

            

                
{{$index + 1}}
                
{{schoolss.name}}
                
{{schoolss.teacher}}
                

            
        

        

            Submit Data   
                Remove Row
        

        
{{display}}
    

index.js

  var app = angular.module('liveApp', []);
    app.controller('liveCtrl', function ($scope) {

        // JSON ARRAY TO POPULATE TABLE.
        $scope.studentArray =
        [
            { 'name': 'Rahul gandhi', 'teacher': 'Mayur shah' },
            { 'name': 'Divaya jani', 'teacher': 'Narendr modi' },
            { 'name': 'virat kohali', 'teacher': 'Sachin tenduulakar' }
        ];

        // GET VALUES FROM INPUT BOXES AND ADD A NEW ROW TO THE TABLE.
        $scope.createRow = function () {
            if ($scope.name != undefined && $scope.teacher != undefined) {
                var schools = [];
                schools.name = $scope.name;
                schools.teacher = $scope.teacher;

                $scope.studentArray.push(schools);

                // CLEAR TEXTBOX.
                $scope.name = null;
                $scope.teacher = null;
            }
        };

        // REMOVE all the table SELECTED ROW(s) FROM TABLE.
        $scope.deleteRow = function () {
            var arrStudent = [];
            angular.forEach($scope.studentArray, function (value) {
                if (!value.Remove) {
                    arrStudent.push(value);
                }
            });
            $scope.studentArray = arrStudent;
        };

        // FINALLY SUBMIT THE DATA.
        $scope.submit = function () {
            var arrStudent = [];
            angular.forEach($scope.studentArray, function (value) {
                arrStudent.push('Name:' + value.name + ', Teacher:' + value.teacher);
            });
            $scope.display = arrStudent;
        };
    });

style.css

        div{
            font:15px Verdana;
            width:450px;
        }
        ul {
            padding:0;
			border:0; 
            float:left; 
            width:100%;
            margin:2px 5px; 
            list-style:none; 
            
        }
        li {
            width:50%; 
            float:left; 
            display:inline-block; 
        }
        table, input {
            text-align:left;
            font:13px Verdana;
        }
        table, td, th 
        {
            margin:10px 0;
            padding:2px 10px;
        }
        td, th {
            border:solid 1px #CCC;
        }
        button {
            font:13px Verdana;
            padding:3px 5px;
        }

Angularjs forEach() function

angular.forEach($scope.studentArray, function (value) {
    if (!value.Remove) {
        arrStudent.push(value);
    }
});

Example

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is AngularJS – Adding/Removing Table Rows Dynamically And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.