I need to display list customers as table as following image by using angularjs but still not find out a solution for it, maybe must use ng-class but don't know how to apply for this case. If everyone have solution please help me.
Condition:
Thanks for your helps.
CSS
<style>
.isteen {
background-color: blue;
}
.isold {
background-color: gray;
}
.isgirl {
color: green;
}
Js
<script>
var app = angular.module('MyForm', []);
app.controller('myCtrl', function ($scope) {
$scope.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'}
] ;
});
HTML
<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>
Edit at Plunker
You can save customers in scope and use ng-repeat to generate rows.
<table>
<tr ng-repeat="customer in customers">
<td>{{ $index + 1 }}</td>
<td>{{ customer.Name }}</td>
<td>{{ customer.Gender }}</td>
<td>{{ customer.Age }}</td>
</tr>
</table>
Then you can add custom classes with ng-class addnotation for each cell:
<td ng-class="{'className': x.Name == 'Batman'}">{{ customer.Name }}</td>
or whole row:
<tr ng-repeat="customer in customers" ng-class="className : customer.Gender == 'Batman'">
<tr ng-repeat="customer in customers" ng-class="greenText : customer.Gender == 'Female'">
<td>{{customer.No}}</td>
<td>{{customer.Name}}</td>
<td>{{customer.Gender}}</td>
<td ng-class="{orangeBg : customer.Age < 20, grayBg : customer.Age > 60}">{{customer.Age}}</td>
<td>{{customer.Phone}}</td>
</tr>
'customers' is the list of 'customer' objects.
greenText, orangeBg and grayBg are css classes
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body class="container" ng-app="">
<style>
.green-back{
background: green;
}
</style>
<table ng-init="customers=[{name:'name1',age:11, gender:'Male'},
{name:'name1',age:22, gender:'Female'}]">
<tr ng-repeat="customer in customers">
<td>{{ $index + 1 }}</td>
<td>{{ customer.name }}</td>
<td ng-class="{'green-back': customer.gender == 'Female'}">{{ customer.gender }}</td>
<td>{{ customer.age }}</td>
<td >{{ customer.c }}</td>
</tr>
</table>
</body>Use this way. ng-class will help you proper give dynamic styles, i have declared the json array with ng-init and also i have provided the style i have used. this will generate the td with female gender with green background
<style>
.green-back{
background: green;
}
</style>
<table ng-init="customers=[{name:'name1',age:11, gender:'Male'},
{name:'name1',age:22, gender:'Female'}]">
<tr ng-repeat="customer in customers">
<td>{{ $index + 1 }}</td>
<td>{{ customer.name }}</td>
<td ng-class="{'green-back': customer.gender == 'Female'}">{{customer.gender }}</td>
<td>{{ customer.age }}</td>
</tr>
</table>
