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); } }
<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"> <td>{{item.year}}</td> <td>{{item.make}}</td> <td>{{item.model}}</td> </tr> </tbody> <tfoot> <tr class="bg-info"> <td colspan="3"></td> </tr> </tfoot> </table> </div> </div>