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.

Read Also:  Could not fully remove the plugin in Wordpress

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



    <div>
        <ul>
            <li>Teacher Name</li>
            <li></li>
        </ul>
        <ul>
            <li>Name of Teacher</li>
            <li></li>
        </ul>
        <ul>
            <li></li><li><button> Add Row </button></li>
        </ul>

        <!--CREATE A  HTML TABLE-->
        <table> 
            <tr>
                <th>Code</th>
                    <th>Teacher Name</th>
                        <th>Teacher</th>
            </tr>

            <tr>
                <td><label>{{$index + 1}}</label></td>
                <td><label>{{schoolss.name}}</label></td>
                <td><label>{{schoolss.teacher}}</label></td>
                <td></td>
            </tr>
        </table>

        <div>
            <button>Submit Data</button>   
                <button>Remove Row</button>
        </div>

        <div id="display" style="padding:10px 0">{{display}}</div>
    </div>

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

Read Also:  how to dynamically Add and Delete rows dynamically using angularjs?

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  How to Add an Infinite Client Logo Carousel using bootstrap?
  2. Read Also:  PHP Laravel CKEditor Canned Responses using jquery
  3. Read Also:  Top 10 Advanced Reactjs Interview Questions Answers
  4. Read Also:  laravel Check Request is Ajax Example
  5. Read Also:  html em tag Attributes
  6. Read Also:  global variable for all controller and views in Laravel
  7. Read Also:  Laravel 5.6 Admin Panel Example Tutorial From Scratch
  8. Read Also:  PHP Laravel Limit String Length (Truncate string) Example
  9. Read Also:  PHP Check if Multiple Array contains all Array
  10. Read Also:  AngularJS Adding Form Fields Dynamically with PHP MySQLi
CLOSEX