Angular Table Filter Example

by jacobwsmith

HTML

<div ng-app ng-controller="Controller">
    <div ng-repeat="category in categories">
        <input id="{{category.label}}" type='checkbox' ng-model='category.isChecked'></input>
        <label for="{{category.label}}" >{{category.label}}</label>
    </div>
    <div>
        <button ng-click='clickSubmit()'>Submit</button>
    </div>
    <table class="table table-index">
        <thead>
            <tr>
                <th></th>
                <th>First</th>
                <th>Last</th>
                <th>Subscribed</th>
                <th>Category</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="5">&nbsp;</td>
            </tr>
        </tfoot>
        <tbody>
            <tr ng-repeat="result in results">
                <td>{{$index+1}}</td>
                <td>{{result.first}}</td>
                <td>{{result.last}}</td>
                <td>{{result.subscribed}}</td>
                <td>{{result.category}}</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

table.table {
    width: 100%;
    border-spacing: 0;
    font-size: 0.9em;
    margin: 0;
    border-collapse: inherit;
}
table.table thead tr th {
    line-height: 27px;
    border-left: 0;
    border-top: 0;
    width: auto;
    white-space: nowrap;
    padding:0 4px 0 4px;
    min-width: 111px;
}
table.table tbody tr td {
    padding:5px;
    text-align: center;
    width: auto;
    white-space: nowrap;
    vertical-align: middle;
}
table.table tfoot td {
    padding:5px;
    text-align: center;
    width: auto;
    white-space: nowrap;
    vertical-align: middle;
}
/* ========================================== */

/* .table-index 
*   - Sets the colors, borders and widths
*/

/* ========================================== */
 table.table-index thead tr {
    background: #eeeeee;
    /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #e7e7e7 27%, #d3d3d3 77%, #cdcdcd 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(27%, #e7e7e7), color-stop(77%, #d3d3d3), color-stop(100%, #cdcdcd));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%, #e7e7e7 27%, #d3d3d3 77%, #cdcdcd 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%, #e7e7e7 27%, #d3d3d3 77%, #cdcdcd 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%, #e7e7e7 27%, #d3d3d3 77%, #cdcdcd 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #eeeeee 0%, #e7e7e7 27%, #d3d3d3 77%, #cdcdcd 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cdcdcd', GradientType=0);
    /* IE6-9 */
}
table.table-index thead tr th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
table.table-index tbody tr td {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
table.table thead tr th:last-child, table.table tbody tr...

JavaScript

function Controller($scope) {
    
    // ===================================================
    // Click submit to reset the results object
    // ===================================================
    $scope.clickSubmit = function () {
        var i,
        hasFilter = false,
        hitList = {};

        // Loop through categories
        for (i = 0; i < $scope.categories.length; i++) {
            hitList[$scope.obj[i].category] = $scope.categories[i].isChecked;
            if ($scope.categories[i].isChecked) {
                hasFilter = true;
            }
        }
        
        // Set the results
        if (hasFilter === true) {
            // Clear out the results
            $scope.results = [];
            // Loop through the default object and load up the results
            for (i = 0; i < $scope.obj.length; i++) {
                if (hitList[$scope.obj[i].category] === true) {
                    $scope.results.push($scope.obj[i]);
                }
            }
        } else {
            // Set the results object using the default object
            $scope.results = $scope.obj;
        }
    };

    // ===================================================
    // Default object
    // ===================================================
    $scope.obj = [{
        first: 'John',
        last: 'Smith',
        subscribed: true,
        category: 1
    }, {
        first: 'Joe',
        last: 'Brown',
        subscribed: true,
        category: 2
    }, {
        first: 'Larry',
        last: 'Bird',
        subscribed: false,
        category: 3
    }, {
        first: 'Kirk',
        last: 'Captain',
        subscribed: false,
        category: 1
    }];
    
    // ===================================================
    // Category list
    // ===================================================
    $scope.categories = [{
        label: 'Category 1',
        value: 1,
        isChecked: false
    }, {
        label: 'Category 2',
       ...