Dynamically Adding Row Using AngularJs in MVC

In this article I will explain about the basics of angularjs and I will make an application for adding dynamic rows.

Basics of angularjs

AngularJs is a javascript library. It helps in binding data to view.

Ng-app- It define the angularJs application.

Ng-model-It bind the value of HTML controls to application data

Ng-bind-It binds application data to the HTML view

Ng-controller-it define the controller

Expression are written inside double braces {{ expression }}

AngularJs modules-define angularJs application

AngularJs controllers control

Example-

Take a new project and add a controller then add a index view

In the index view add the following code.

@{
    Layout = null;
}
 
<!DOCTYPEhtml>
 
<html>
<head>
    <metaname="viewport"content="width=device-width"/>
    <title>Index</title>
  @*  <script src="~/Scripts/knockout-3.4.1.js"></script>*@
  @*  <script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"> </script>*@
    <scriptsrc="~/Scripts/angular.min.js"></script>
     <style>
        table {
            width: 100%;
            border: 1pxsolid#000;
            border-collapse: collapse;
            padding: 5px;
        }
 
            tabletd {
                text-align: center;
                padding: 5px;
            }
    </style>
    <script>
        var myApp = angular.module("myApp", []);
        myApp.controller("myController", function ($scope) {
  
            $scope.empdetails = [{
                empno: '',
                name: '',
                age: '',
            }];
 
            $scope.addrow = function () {
                $scope.empdetails.push({
                    empno: '',
                    name: '',
                    age: '',
                });
 
            };
 
            $scope.delete = function (val) {
                $scope.empdetails.splice(val,1);
            };
        });
    </script>
</head>
<body>
    <divng-app="myApp"ng-controller="myController"style="width: 82%; margin: auto; border: solid1px#000;">
        <divstyle="text-align: center;"><b>Adding Dynamic Rows to Table using AngulatJS</b></div>
        <tableborder="1">
            <tr>
                <th>Emp No</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <trng-repeat="items in empdetails">
                <td>
                    <inputid="TxtEmpNo"name="empno"type="text"/>
 
                </td>
                <td>
                    <inputid="TxtName"name="name"type="text"/>
                </td>
                <td>
                    <inputid="TxtAge"name="age"type="text”/>
                </td>
                </td>
                <td><ahref="javascript:;"ng-click="delete($index)">delete</a></td>
            </tr>
        </table>
        <div><ahref="javascript:;"ng-click="addrow()">add</a></div>
      
    </div>
  
</body>
</html>

Output

In the above output screenshot we have seen that there are two buttons add and delete by clicking add button it dynamically add another row and when we click delete button it deletes the current row.

You can also visit these useful post

Create Dynamic Row in a Table With HTML Using JavaScript

Add a new Row in WebGrid using MVC4

blog

Dynamically Adding Row Using AngularJs in MVC

Manish Kumar

Leave Comment

Comments

Liked By