Add or Remove Table Rows Dynamically in AngularJS

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.

  PHP Laravel Autocomplete search from Database Example

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

  Simple JQuery Preloader With CSS And Image

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.