AngularJS
ng-class-even Directive
ng-class-even directive is same as ng-class to
add one or more css to html. It can be use with ng-repeat to apply css on even
rows. It is styling directive and useful for design purpose.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>ng-class Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
.even-row
{
color:
white;
background-color:
grey;
}
</style>
</head>
<body>
<div
ng-app="myApp1" ng-controller="Employee1Controller">
<table>
<thead>
<tr>
<th>Days</th>
<th>Available
Time</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in weekData" ng-class-even="'even-row'">
<td>{{item.day}}</td>
<td>{{item.hours}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var myapp =
angular.module('myApp1', []);
myapp.controller('Employee1Controller', function ($scope) {
$scope.weekData = [{ day: "Friday", hours: "5:00pm to 12:00am"
},
{ day: "Wednesday", hours: "5:00pm to 11:00pm" },
{ day: "Sunday", hours: "11:00am to 11:00pm"
},
{ day: "Thursday", hours: "5:00pm to 11:00pm"
},
{ day: "Saturday", hours: "11:00am to 12:00am" }
];
});
</script>
</body>
</html>
OutPut:-
OutPut:-
No comments:
Post a Comment