AngularJS: Simple Custom Filter

by Alberto Naperi Jr.

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.js"></script>
<div ng-app="clientApp">
    <div ng-view></div>
    <script type="text/ng-template" id="/this.html">
        <ul class="inline">
            <li>
                <div class="alert alert-info">
                    <h4>Total Filtered Client: {{filtered.length}}</h4>
                </div>
            </li>
            <li>
                <div class="btn-group" data-ng-class="{open: open}">
                    <button class="btn">Filter by Company</button>
                    <button class="btn dropdown-toggle" data-ng-click="open = !open"><span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#/clients"><i class="icon-ok-sign"></i>  Check All</a>
                        </li>
                        <li class="divider"></li>
                        <li data-ng-repeat="company in companyList"> <a data-ng-click="setSelectedClient()">{{company.name}}<span data-ng-class="isChecked(company.name)"></span></a></li>
                    </ul>
                </div>
            </li>
        </ul>
        <hr/>
        <h3>Size Table:</h3>
        <table class="table table-hover table-striped">
            <thead>
                <tr>
                    <th style="width:20%">Company</th>
                    <th style="width:40%">Designation</th>
                    <th style="width:30%">Name</th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="client in filtered = (clients| companyFilter:selectedCompany)">
                    <td><a...

JavaScript

'use strict';

var app = angular.module('clientApp', ['ngRoute', 'App.filters']);

app.config(function($routeProvider) {
    $routeProvider
        .when('/clients', {
            templateUrl: '/this.html',
            controller: 'ClientCtrl'
        })
        .otherwise({redirectTo: '/clients'});
});

app.controller('ClientCtrl', ['$scope', '$routeParams', function ($scope, $routeParams) {
    var companyName = $routeParams.company;
    console.log($routeParams);
    
    $scope.selectedCompany = [];
    $scope.companyList = [
        {name: 'A'},
        {name: 'B'},
        {name: 'C'}
    ];
    
    $scope.clients = [{
        name: 'Gray',
        designation: 'Manager',
        company: {name: 'A'}
    }, {
        name: 'White',
        designation: 'M',
        company: {name: 'A'}
    }, {
        name: 'White',
        designation: 'M',
        company: {name: 'B'}
    }, {
        name: 'White',
        designation: 'Senior',
        company: {name: 'B'}
    }, {
        name: 'White',
        designation: 'Junior',
        company: {name: 'C'}
    }, {
        name: 'White',
        designation: 'M',
        company: {name: 'A'}
    }];
    
    if (companyName) {
        if (_.contains($scope.selectedCompany, companyName)) {
            $scope.selectedCompany = _.without($scope.selectedCompany, companyName);
        } else {
            $scope.selectedCompany.push(companyName);
        }
    }
    
    $scope.setSelectedClient = function() {
        var name = this.company.name;
        if (_.contains($scope.selectedCompany, name)) {
            $scope.selectedCompany = _.without($scope.selectedCompany, name);
        } else {
            $scope.selectedCompany.push(name);
        }
        return false;
    };
    
    $scope.isChecked = function(name) {
        if (_.contains($scope.selectedCompany, name)) {
            return 'icon-ok pull-right';
        }
        return false;
    };
    //
    //                $scope.checkAll = function()...