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.0.5/angular-resource.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.js"></script>
<div ng-controller="ClientCtrl">
    <div ng-view></div>
</div>

<script type="text/ng-template" id="this.html">
<div>
    <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 href=...

JavaScript

'use strict';

var app = angular.module('clientApp', ['ngRoute', 'ngResource', '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(companyName);
    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;
    };
    //
   ...