To Show Records In Color using Condition Using ng-class directive

Swappy_Gaj
Posted by Swappy_Gaj under ASP.NET category on | Points: 40 | Views : 185
Explanation:
Here we are displaying records in "GREEN" color based on "Salary<2500"
----------------------------------------------------------------------------------
STEPS:
1.Create Array Of Person with name and salary attributes
2.Create table
3.Create .css file for font color(s.css)
<script type="text/css">
.odd {
background-color: blue;
}
.even {
background-color: green;
}
</script>

---------------------------------------------
4.Create table
5.Use ng-repeat to loop through records
6.Apply ng-class using condition
---------------------------------------------------------------------------------------
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
<LINK href="s.css" rel="stylesheet" type="text/css">

</head>
<body>
<div ng-controller="ctrl">
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr ng-repeat="n in person" >
<td ng-class="{'even': n.salary<2500}">{{n.name}}</td>
<td ng-class="{'even': n.salary<2500}">{{n.salary}}</td>
</tr>

</table>



</div>
<script type="text/javascript">

var myapp=angular.module('myapp', []);

myapp.controller('ctrl',function($scope){
$scope.person = [
{name: "Swapnil", salary: 2400},
{name: "Sumedh", salary: 2500},
{name: "Amit", salary: 2400},
{name: "Rakesh", salary: 2400}

];
});
</script>



</body>
</html>

Comments or Responses

Login to post response