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;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="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>*@
    <script src="~/Scripts/angular.min.js"></script>
     <style>
        table {
            width: 100%;
            border: 1px solid #000;
            border-collapse: collapse;
            padding: 5px;
        }
 
            table td {
                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>
    <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>
            </tr>
            <tr ng-repeat="items in empdetails">
                <td>
                    <input id="TxtEmpNo" name="empno" type="text" />
 
                </td>
                <td>
                    <input id="TxtName" name="name" type="text" />
                </td>
                <td>
                    <input id="TxtAge" name="age" type="text” />
                </td>
                </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>
  
</body>
</html>


Output

Dynamically Adding Row Using AngularJs in MVC


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

  Modified On Mar-17-2018 05:10:30 AM

Leave Comment