AngularJS: ng-style or style

by nekyouto

HTML

<!-- 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>

CSS

table {
    width:100%;
}

tr {
    width:100%;
}

td {
    width:100%;
    text-align:left;
}

.boxClass {
    width:50px;
    height:50px;
    float: left;
}

JavaScript

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