AngularJS: declarative templates

by koper

HTML

<body ng-app>
    <table ng-controller="ColorsCtrl">
        <tr>
            <th>Color</th>
            <th>Name</th>
        </tr>
        <tr ng-repeat="color in colors">
            <td class="box" 
                ng-style="mkBackgroundColor(color)"
                ng-click="duplicate(color)">
            </td>
            <td ng-bind="color"></td>
        </tr>
    </table>
</body>

CSS

.box {
    display: inline-block;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

JavaScript

function ColorsCtrl($scope) {
    $scope.colors = ['blue', 'red', 'green'];
    $scope.mkBackgroundColor = function(color) {
        return {'background-color': color};
    }
    $scope.duplicate = function(color) {
        $scope.colors.push(color);
    }
}