AngularJS Table
AngularJS is capable handle large data .Large data is generally represent by tabular structure.ng-repeat directive can be used to draw table easily.Following example states the use of ng-repeat directive to draw a table.This example is a live example , you can change input (name/age) , you will notice , table data will be change.
{ name: "User 1", age: 12, mark: [{ lang: 50, math: 12, geo: 60}] },
AngularJS is capable handle large data .Large data is generally represent by tabular structure.ng-repeat directive can be used to draw table easily.Following example states the use of ng-repeat directive to draw a table.This example is a live example , you can change input (name/age) , you will notice , table data will be change.
| Name | |
| Age |
| Sl.No | Name | Age | Language /Math/Grograpy |
|---|---|---|---|
| {{ $index + 1 }} | {{ obj.name }} | {{ obj.age }} |
{{subobj.lang}}-Pass
{{subobj.lang}}-Fail
{{subobj.math}}-Pass
{{subobj.math}}-Fail
{{subobj.geo}}-Pass
{{subobj.geo}}-Fail
|
<div>
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<style>
table,
th,
td
{
border:
1px
solid
grey;
border-collapse:
collapse;
padding:
5px;
}
table
tr:nth-child(odd)
{
background-color:
#f2f2f2;
}
table
tr:nth-child(even)
{
background-color:
#ffffff;
}
</style>
<script>
angular.module("myapp",
[])
.controller("myController",
function
($scope) {
$scope.person
= [
{ name: "User 1", age: 12, mark: [{ lang: 50, math: 12, geo: 60}] },
{
name: "User
2",
age: 18, mark: [{ lang: 60, math: 90, geo: 70}] },
{
name: "User
3",
age: 20, mark: [{ lang: 70, math: 49, geo: 80}] },
{
name: "User
4",
age: 21, mark: [{ lang: 70, math: 100, geo: 80}] },
{
name: "User
5",
age: 22, mark: [{ lang: 30, math: 100, geo: 80}] },
{
name: "User
6",
age: 23, mark: [{ lang: 70, math: 100, geo: 35}] },
{
name: "User
7",
age: 24, mark: [{ lang: 70, math: 100, geo: 80}] },
{
name: "User
8",
age: 25, mark: [{ lang: 70, math: 100, geo: 80}] },
];
$scope.Save
= function
() {
$scope.person[0].name
= $scope.myName;
$scope.person[0].age
= $scope.myAge;
};
$scope.SetInitial
= function
() {
$scope.myName
= $scope.person[0].name;
$scope.myAge
= $scope.person[0].age;
};
});
</script>
<div
ng-app="myapp">
<div
ng-controller="myController"
ng-init="SetInitial()">
<div>
<div>
<table>
<tr>
<td>
Name
</td>
<td>
<input
type="text"
ng-model="myName"
ng-change="Save()"
/>
</td>
</tr>
<tr>
<td>
Age
</td>
<td>
<input
type="text"
ng-model="myAge"
ng-change="Save()"/>
</td>
</tr>
</table>
</div>
<br/>
<br/>
</div>
<br/>
<table
style="width:
500px;">
<tr>
<th>
Sl.No
</th>
<th>
Name
</th>
<th>
Age
</th>
<th>
Language
/Math/Grograpy
</th>
</tr>
<tr
ng-repeat="obj
in person">
<td>
{{
$index + 1 }}
</td>
<td>
{{
obj.name }}
</td>
<td>
{{
obj.age }}
</td>
<td
ng-repeat="subobj
in obj.mark">
<span>
<div
ng-if="subobj.lang
>= 50">
{{subobj.lang}}-Pass
</div>
<div
ng-if="subobj.lang
< 50">
{{subobj.lang}}-<span
style="color:
Red;">Fail</span>
</div>
<div
ng-if="subobj.math
>= 50">
{{subobj.math}}-Pass
</div>
<div
ng-if="subobj.math
< 50">
{{subobj.math}}-<span
style="color:
Red;">Fail</span>
</div>
<div
ng-if="subobj.geo
>= 50">
{{subobj.geo}}-Pass
</div>
<div
ng-if="subobj.geo
< 50">
{{subobj.geo}}-<span
style="color:
Red;">Fail</span>
</div>
</span>
</td>
</tr>
</table>
</div>
</div>
</html>
</div>
No comments:
Post a Comment