Cost Centers Angular

by rsmclaug

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<div ng-controller="MainController">
    <div>Cost Centers - {{getTotal()}} Total ({{getActive()}} Active)</div>
    <input type="text" ng-model="name"/><button ng-click="go()">Go</button>
    <input type="text" ng-model="nameFilter"/>
    <ul>
        <li ng-repeat="cc in costCenters | filter:nameFilter | orderBy:'name'">
            <input type="checkbox" ng-checked="cc.active" ng-model="cc.active"/>
            <span class="checked-{{cc.active}}">{{cc.name | lowercase}}</span>
            <span>{{cc.active}}</span>
        </li>
    </ul>
</div>

CSS

.checked-false {
    text-decoration: line-through;
    color: gray;
}

.checked-true {
    text-decoration: none;
    color: green;
}

JavaScript

var app = angular.module('myApp', []);

app.controller('MainController', function($scope) {
    $scope.costCenters = [
        {name: "Cost Center 1", active: true},
        {name: "Cost Center 2", active: true},
        {name: "Cost Center 3", active: true},
        {name: "Agency CC", active: true}
    ];
    
    $scope.go = function() {
        $scope.costCenters.push({
            name: $scope.name,
            active: false
        });
        $scope.name = "";
    };
    
    $scope.getTotal = function(){
        return $scope.costCenters.length;
    };
    
    $scope.getActive = function(){
        return _.filter($scope.costCenters, function($this){
            return $this.active;
        }).length;
    };
});