// declare a module var myApp = this.angular.module('myApp', []); // declare a controller myApp.controller('myCtrl', function ($scope, $interval) { $scope.colorBg = [{ color: "F0F000" }, { color: "0FF000" },{ color: "00F0F0" }, { color: "000FF0" }, { color: "F000F0" }, { color: "F0000F" }]; $scope.getStyle = function(obj){ return {"background": "#" + obj}; } $scope.updateArray = function(){ var arrB = $scope.colorBg.splice(0,1); $scope.colorBg.push(arrB[0]); } $interval($scope.updateArray, 100); });
<!-- stitch this with the module declare in Javascript --> <body ng-app="myApp"> <div ng-controller="myCtrl"> <table> <tr> <td>This uses ng-repeat and style. (Doesn't work in IE...)</td> </tr> <tr> <td> <div ng-repeat="obj in colorBg" class="boxClass" style="background: {{'#' + obj.color}}"/> </td> </tr> <tr> <td>This uses ng-repeat and ng-style.</td> </tr> <tr> <td> <div ng-repeat="obj in colorBg" class="boxClass" ng-style="getStyle(obj.color)"/> </td> </tr> </table> </div> </body>
table { width:100%; } tr { width:100%; } td { width:100%; text-align:left; } .boxClass { width:50px; height:50px; float: left; }