In
this article I am going to explain how to show data in grid format using
Angularjs.
In
the previous article I have explained how to display auto generated serialnumber in Angularjs grid format, Sql query to get week number from currentorspecific 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
want to show the data in grid format.
To
display data we will use the ng-repeat directive of angularjs.
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>
Build
and run the application. Check the result.
Result:
0 Comments