// 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; }