Introduction
This article explains how to show data in a dynamic grid using AngularJS.
AngularJS provides many features for creating various kinds of applications. Here I will create an application with a dynamic grid using AngularJS.
Step 1
First of all you need to add an external Angular.js file to your application, "angular.min.js".
For this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link to download it: ANGULARJS.
After downloading the external file you need to add this file to the Head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now after adding the external JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will first work on the ViewModel or JavaScript part of this application. So, write this code in the head section of your application:
<script>
var empid = 1;
function x($scope) {
$scope.employees = [
{ id: 0, 'name': 'Anubhav', 'address': 'Ghaziabad', 'dept': 'Developer' }
];
$scope.saveRecord = function () {
if ($scope.newEmployee.id == null) {
$scope.newEmployee.id = empid++;
$scope.employees.push($scope.newEmployee);
} else {
for (i in $scope.employees) {
if ($scope.employees[i].id == $scope.newEmployee.id) {
$scope.employees[i] = $scope.newEmployee;
}
}
}
$scope.newEmployee = {};
}
}
</script>
Here first I have created an id that will increase the number of employees to be entered, it's initial value is set to 1.
Then a function is created, the function "x"; this function will be bound to the controller. In this function a variable, "employees", is used; in this variable some initial values about the first employee is passed like it's name, address and so on.
After this another function is created for adding the new employees, it will check whether or not the id is null, if it's not null then the employee Id will be increased by one and a new entry will be made in the employee list.
Now our work on the ViewModel is completed and we can move to the View part, the design part.
Step 3
Write this code in the body section of your application:
<body>
<form id="form1" runat="server">
<div ng-app="" ng-controller="x">
<label>Name</label>
<input type="text" name="name" ng-model="newEmployee.name"/>
<label>Address</label>
<input type="text" name="address" ng-model="newEmployee.address"/>
<label>Dept.</label>
<input type="text" name="dept" ng-model="newEmployee.dept"/>
<br/>
<input type="hidden" ng-model="newEmployee.id" />
<input type="button" value="Save" ng-click="saveRecord()"/>
<table>
<tr>
<th>Name</th>
<th>Address</th>
<th>Dept</th>
</tr>
<tr ng-repeat="employee in employees">
<td>{{ employee.name }}</td>
<td>{{ employee.address }}</td>
<td>{{ employee.dept }}</td>
</tr>
</table>
</div>
</form>
</body>
Here the parent div is bound to the function "x" using the ng-controller directive.
In this div three Textboxes are used, the first TextBox is bound to the name of the employee, the second TextBox is bound to the address and the last one is bound to the department of the Employee. All these Textboxes are bound using the ng-model directive.
After the Textboxes a button is added with a click firing the function "saveRecord".
After this a table is added with a first row showing the column headings and the second row is bound using the ng-repeat, so this is a dynamic row that will increase by every new entry made to the table.
In this row three columns are created that are bound to the employee's name, address and department. Since these are part of the dynamic columns they will also be automatic on each new entry made.
Now our application is created and is ready for execution.
Output
On running the application you will get output like this:
![grid in angularjs]()
Here you can see that by default one row of data is shown in the grid; that's because we have provided this data as the initial value.
Now I am entering a new row of data.
![grid in angularjs]()
Now as I click on the button then this new row of data will be entered into the previously existing Grid.
![grid in angularjs]()
You can see that my Grid is updated.
The complete code of this application is as follows:
<body>
<form id="form1" runat="server">
<div ng-app="" ng-controller="x">
<label>Name</label>
<input type="text" name="name" ng-model="newEmployee.name"/>
<label>Address</label>
<input type="text" name="address" ng-model="newEmployee.address"/>
<label>Dept.</label>
<input type="text" name="dept" ng-model="newEmployee.dept"/>
<br/>
<input type="hidden" ng-model="newEmployee.id" />
<input type="button" value="Save" ng-click="saveRecord()" class="btn btn-primary"/>
<br />
<br />
<table border="1" bordercolor="blue">
<tr style="color:blue">
<th style="width:150px">Name</th>
<th style="width:150px">Address</th>
<th style="width:150px">Dept</th>
</tr>
<tr style="color:pink" ng-repeat="employee in employees">
<td>{{ employee.name }}</td>
<td>{{ employee.address }}</td>
<td>{{ employee.dept }}</td>
</tr>
</table>
</div>
</form>
</body>