<!doctype html>
<html>
<head>
<title>ng-class</title>
<meta charset="utf-8"/>
<meta name="application-name" content="ng-class example"/>
<style>
.orange{
background-color: tomato;
}
.green{
background-color: lightgreen;
}
.blue{
color: blue;
}
</style>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"> </script>
/ / Here $scope is javascript object passed by Angular JS as a binder between view and controller and its scoping is in the area where controller called in the HTML ( <body ng-app ng-controller="EmployeesNameSalary"> .... </body>) / /
<script type = "text/javascript">
function EmployeeNameSalary ( $scope ) {
$scope . employeeList = [
{
name: "John",
salary: 1200
},
{
name: "Travolta",
salary: 1240
},
{
name: "Leonardo",
salary: 3000
},
{
name: "Caprio",
salary: 1400
},
{
name: "David",
salary: 1800
},
{
name: "Jason",
salary: 4000
},
{
name: "Gefferson",
salary: 2300
},
{
name: "Brate",
salary: 1300
},
{
name: "Masud",
salary: 1800
},
{
name: "Rahman",
salary: 1100
}
];
}
</script>
</head>
/ / After document loaded Angular JS looks for the ng-app directive which can either be a Tag or Attribute from where its scoping starts. ng-app only once per application / /
<body ng-app ng-controller = " EmployeeNameSalary " >
<table border="1" width="300">
<thead>
<tr>
<th>Enployee Name</th>
<th>Enployee Salary</th>
</tr>
</thead>
<tbody>
/ / ng-class directive applying CSS conditionally when employee salary < 1400 , tr row will get orange color and it will be green when employee salary > 1500 and the row will be repeated by ng-repeat directive / /
<tr ng-repeat = " employee in employeeList " ng-class = " (blue : true , orange : employee.salary < 1400 , green : employee . salary > 1500 ) " >
<td> {{ employee.name }} </td>
<td> {{ employee.salary }} </td>
</tr>
</tbody>
</table>
</body>
</html>
<html>
<head>
<title>ng-class</title>
<meta charset="utf-8"/>
<meta name="application-name" content="ng-class example"/>
<style>
.orange{
background-color: tomato;
}
.green{
background-color: lightgreen;
}
.blue{
color: blue;
}
</style>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"> </script>
/ / Here $scope is javascript object passed by Angular JS as a binder between view and controller and its scoping is in the area where controller called in the HTML ( <body ng-app ng-controller="EmployeesNameSalary"> .... </body>) / /
<script type = "text/javascript">
function EmployeeNameSalary ( $scope ) {
$scope . employeeList = [
{
name: "John",
salary: 1200
},
{
name: "Travolta",
salary: 1240
},
{
name: "Leonardo",
salary: 3000
},
{
name: "Caprio",
salary: 1400
},
{
name: "David",
salary: 1800
},
{
name: "Jason",
salary: 4000
},
{
name: "Gefferson",
salary: 2300
},
{
name: "Brate",
salary: 1300
},
{
name: "Masud",
salary: 1800
},
{
name: "Rahman",
salary: 1100
}
];
}
</script>
</head>
/ / After document loaded Angular JS looks for the ng-app directive which can either be a Tag or Attribute from where its scoping starts. ng-app only once per application / /
<body ng-app ng-controller = " EmployeeNameSalary " >
<table border="1" width="300">
<thead>
<tr>
<th>Enployee Name</th>
<th>Enployee Salary</th>
</tr>
</thead>
<tbody>
/ / ng-class directive applying CSS conditionally when employee salary < 1400 , tr row will get orange color and it will be green when employee salary > 1500 and the row will be repeated by ng-repeat directive / /
<tr ng-repeat = " employee in employeeList " ng-class = " (blue : true , orange : employee.salary < 1400 , green : employee . salary > 1500 ) " >
<td> {{ employee.name }} </td>
<td> {{ employee.salary }} </td>
</tr>
</tbody>
</table>
</body>
</html>