Angular Color Variable

Angular Color Variable

by Marko Keuschnig

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
<div ng-app>
    <div ng-controller="ItemCtrl">
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <table class="table table-condensed table-responsive table-striped table-hover">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Value</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in items">
                        <td ng-style="{'background-color': '{{item.color}}', 'color' : 'white'}">{{item.name}}</td>
                        <td ng-style="{'background-color': '{{item.color}}', 'color' : 'white'}">{{item.value}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

JavaScript

function ItemCtrl($scope) {
    var colors = [
        "#7cb5ec",
        "#434348",
        "#90ed7d",
        "#f7a35c",
        "#8085e9",
        "#f15c80",
        "#e4d354",
        "#8085e8",
        "#8d4653",
        "#91e8e1"];

    $scope.items = [{
        name: "Urlaub",
        value: 27,
        color: colors[0]
    }, {
        name: "Urlaub",
        value: 27,
        color: colors[1]
    }, {
        name: "Urlaub",
        value: 27,
        color: colors[2]
    }, {
        name: "Urlaub",
        value: 27,
        color: colors[3]
    }, {
        name: "Urlaub",
        value: 27,
        color: colors[4]
    }];
}