Angularjs table format example
Requirement:Have a list customers, show customer information (name, age, gender, phone) as a table.
To make discern base on gender: if gender = 'girl' then textcolor will be green
To make discern base on age: if age <20 background of age cell will be blue (is teen)
if age >60 background of age cell will be gray(is old)
As same as following image
<html>
<head>
<title> Angular JS table sort and filter example </title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
var app = angular.module('MyForm', []);
app.controller('myCtrl', function ($scope) {
});
</script>
<style>
.isteen {
background-color: blue;
}
.isold {
background-color: gray;
}
.isgirl {
color: green;
}
td th {
height: 30px;
min-width: 100px;
}
thead {
background-color: black;
color: white;
height: 30px;
}
</style>
</head>
<body ng-app="MyForm" ng-controller="myCtrl">
<h3>List customers</h3>
<div ng-init=" students = [
{name: 'Kevin', age: 25, gender: 'boy', phone:'091231232'},
{name: 'John', age: 30, gender: 'girl',phone:'091231233'},
{name: 'Laura', age: 28, gender: 'girl',phone:'091231234'},
{name: 'Joy', age: 15, gender: 'girl',phone:'091231235'},
{name: 'Mary', age: 28, gender: 'girl',phone:'091231236'},
{name: 'Peter', age: 95, gender: 'boy',phone:'091231237'},
{name: 'Bob', age: 50, gender: 'boy',phone:'091231238'},
{name: 'Erika', age: 27, gender: 'girl',phone:'091231239'},
{name: 'Patrick', age: 40, gender: 'boy',phone:'0912312366'},
{name: 'Tery', age: 61, gender: 'girl',phone:'0912312355'}
] ">
<table style="min-width: 600px;" >
<thead>
<tr>
<th>No</th>
<th>
Name
</th>
<th> Age </th>
<th >Gender</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in students" ng-class="user.gender=='girl'? 'isgirl':''">
<td>
{{ $index }}
</td>
<td>{{ user.name}}</td>
<td ng-class="user.age <20?'isteen':user.age >60?'isold':''">{{ user.age}}</td>
<td >{{ user.gender}}</td>
<td>{{ user.phone}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Demo at Plunker
No comments:
Post a Comment