AngularJS Data Grid with Filters

created by ozkary.com

by ozkary

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<div ng-app="app">
    <div ng-controller="app.grid as ctrl" class="container text-center">
         <h4>Grid with Header Filters Demo</h4>

        <table class="table table-condense">
            <caption>ozkary.com Vehicle Inventory</caption>
            <thead>
                <tr class="bg-primary">
                    <th>Year</th>
                    <th>Make</th>
                    <th>Model</th>
                </tr>
                <tr>
                    <td>
                        <div class="control-group">
                            <div class="controls">
                                <input class="form-control" ng-model="ctrl.search.year" ng-change="ctrl.filter()" type="text">
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="control-group">
                            <div class="controls">
                                <input class="form-control" ng-model="ctrl.search.make" ng-change="ctrl.filter()" type="text">
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="control-group">
                            <div class="controls">
                                <input class="form-control" ng-model="ctrl.search.model" ng-change="ctrl.filter()" type="text">
                            </div>
                        </div>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in ctrl.filteredList">
   ...

JavaScript

var appName = 'app';
var app = angular.module(appName, ['ui.bootstrap']);
app.controller('app.grid', ['$scope', '$filter', gridCtrl]);


function gridCtrl($scope, $filter) {
    var ctrl = this;

    ctrl.items = [{
        year: 1999,
        make: 'Nissan',
        model: 'Altima'
    }, {
        year: 1999,
        make: 'Nissan',
        model: 'Cube'
    }, {
        year: 2011,
        make: 'Nissan',
        model: 'Rogue'
    }, {
        year: 2011,
        make: 'Nissan',
        model: 'xTerra'
    }, {
        year: 2012,
        make: 'Nissan',
        model: 'Altima'
    }, {
        year: 2012,
        make: 'Nissan',
        model: 'Cube'
    }, {
        year: 2012,
        make: 'Nissan',
        model: 'Rogue'
    }, {
        year: 2012,
        make: 'Nissan',
        model: 'xTerra'
    }, {
        year: 1999,
        make: 'Toyota',
        model: 'Corolla'
    }, {
        year: 1999,
        make: 'Toyota',
        model: 'Yaris'
    }, {
        year: 2012,
        make: 'Toyota',
        model: 'Camry'
    }, {
        year: 2012,
        make: 'Toyota',
        model: 'Rav4'
    }, {
        year: 2013,
        make: 'Toyota',
        model: 'Corolla'
    }, {
        year: 2014,
        make: 'Toyota',
        model: 'Yaris'
    }, {
        year: 2014,
        make: 'Toyota',
        model: 'Camry'
    }, {
        year: 2014,
        make: 'Toyota',
        model: 'Rav4'
    }];

    ctrl.filteredList = ctrl.items;
    ctrl.search = {};

    ctrl.filter = function () {
        this.filteredList = $filter('filter')(ctrl.items, ctrl.search);
    }

}