Adding and deleting dynamic row with textbox to table using AngularJS

Introduction:
This article explain you how to add dynamic rows with textbox to a table using AngularJS
Description:
Below  code is used to add dynamic rows with textbox to a table using AngularJS
To implement this we need to write the code like as shown below

Java Script :

  var myApp = angular.module("myApp", []);
        myApp.controller("myController", function ($scope) {


            $scope.empdetails = [{
                empno: '',
                name: '',
                age: '',
                salary: '',
                deptno: ''
            }];

            $scope.addrow = function () {
                $scope.empdetails.push({
                    empno: '',
                    name: '',
                    age: '',
                    salary: '',
                    deptno: ''
                });

            };

            $scope.delete = function (val) {
                $scope.empdetails.splice(val, 1);
            };
        });

HTML and  CSS:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Add Dynamic Rows to table using AngulatJS</title>

    
    <style>
        table {
            width: 100%;
            border: 1px solid #000;
            border-collapse: collapse;
            padding: 5px;
        }

            table td {
                text-align: center;
                padding: 5px;
            }
    </style>
</head>
<body>
    <div ng-app="myApp" ng-controller="myController" style="width: 82%; margin: auto; border: solid 1px #000;">
        <div style="text-align: center;"><b>Adding Dynamic Rows to Table using AngulatJS</b></div>
        <table border="1">
            <tr>
                <th>Emp No</th>
                <th>Name</th>
                <th>Age</th>
                <th>Salary</th>
                <th>Dept No</th>
                <th>delete</th>
            </tr>
            <tr ng-repeat="items in empdetails">
                <td>
                    <input id="TxtEmpNo" name="empno" type="text" model="items.empno" />

                </td>
                <td>
                    <input id="TxtName" name="name" type="text" model="items.name" />
                </td>
                <td>
                    <input id="TxtAge" name="age" type="text" model="items.age" />
                </td>
                <td>
                    <input id="TxtSalary" name="salary" type="text" model="items.salary" />
                </td>
                <td>
                    <input id="TxtDeptNo" name="deptno" type="text" model="items.deptno" />
                </td>
                <td><a href="javascript:;" ng-click="delete($index)">delete</a></td>
            </tr>
        </table>
        <div><a href="javascript:;" ng-click="addrow()">add</a></div>
        <div style="text-align: center;"><b>www.logicspark.in</b></div>

    </div>
</body>
</html>

DEMO

dynamicrows

Blogger Tips and TricksLatest Tips And TricksBlogger Tricks