In
this article I am going to explain how to display auto generated serial number
in Angularjs grid format.
In
the previous article I have explained Sql query to get week number from currentor specific date, Sql query to get WEEK DAY NAME between two date ranges and SQLSERVER Query to get first and last date with week day name of month.
Description:
I
am displaying the results in grid format using angularjs. I want to add/show serial
number in first column.
Implementation:
Use
the {{$index}} or {{$index+1}} to generate unique id.
Check
below given example code:
Complete
source code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<style>
table tr td
{
padding:
5px 30px 0 0;
}
</style>
<script>
var bookApp
= angular.module("testapp", []);
bookApp.controller('testController',
function ($scope) {
$scope.userList = [
{ "Name":
"John", "Email":
"John@gmail.com" },
{ "Name":
"Vinod", "Email":
"Vinod@yahoo.com" },
{ "Name":
"Steve", "Email":
"Steve@hotmail.com" },
{ "Name":
"Dan", "Email":
"Dan@rock.com" },
{ "Name":
"Jonshan", "Email":
"Jonshan@gmail.com" },
{ "Name":
"Rocky", "Email":
"Rocky@rocks.com" },
{ "Name":
"Santhom", "Email":
"Santhom@yahoo.com" }
];
});
</script>
</head>
<body>
<form id="form1" runat="server">
<fieldset style="width:30%">
<legend>AngularJs
Tutorial</legend>
<div ng-app="testapp" ng-controller="testController">
<table>
<tr>
<td>S.No.</td>
<td>Name</td>
<td>Email</td>
</tr>
<tr ng-repeat="users in userList">
<td>{{$index+1}}</td>
<td>{{users.Name}}</td>
<td>{{users.Email}}</td>
</tr>
</table>
</div>
</fieldset>
</form>
</body>
</html>
Output:
0 Comments