// declare a module
var myApp = this.angular.module('myApp', []);
// declare a controller
myApp.controller('displayCtrl', function ($scope) {
//This would be the data that we are using.
$scope.myBookData = [{
label: "Book 1",
value: 1
}, {
label: "Book 2",
value: 2
}, {
label: "Book 3",
value: 3
}, {
label: "Book 4",
value: 1
}, {
label: "Book 5",
value: 2
}, {
label: "Book 6",
value: 3
}, {
label: "Book 7",
value: 2
}, {
label: "Book 8",
value: 1
}];
});
<!-- stitch this with the module declare in Javascript -->
<body ng-app="myApp">
<div ng-controller="displayCtrl">
<ul>
<li ng-repeat="book in myBookData" ng-class="{styleText0: $index % 3 == 0, styleText1: $index % 3 == 1, styleText2: $index % 3 == 2, styleTextBg0: book.value % 3 == 0, styleTextBg1: book.value % 3 == 1, styleTextBg2: book.value % 3 == 2}">
{{book.label}}
</li>
</ul>
</div>
</body>
/*
The next 3 styles will affect the styling of the text
*/
.styleText0{
text-decoration: underline;
}
.styleText1{
text-decoration: line-through;
}
.styleText2{
text-decoration: none;
}
/*
The next 3 styles will affect the styling of the background color of the text
*/
.styleTextBg0{
background-color: #DDDDFF;
}
.styleTextBg1{
background-color: #DDFFDD;
}
.styleTextBg2{
background-color: #FFDDDD;
}