<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.7" data-semver="1.3.7" src="https://code.angularjs.org/1.3.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="ngTableApp">
<h1>NgTable with select filters</h1>
<div ng-controller="selectFilterController">
<table ng-table="tableParams" class="table" show-filter="true">
<tbody>
<tr ng-repeat="row in $data">
<td data-title="'Name'" filter="{name: 'select'}" filter-data="names" sortable="'name'">{{ row.name }}</td>
<td data-title="'Age'" filter="{age: 'text'}" sortable="'age'">{{ row.age }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
// Code goes here
var app = angular.module('ngTableApp', ['ngTable'])
.controller('selectFilterController', function($scope, $filter, $q, NgTableParams) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}
];
$scope.names = [{id: "", title: ""}, {id: 'Moroni', title: 'Moroni'}, {id: 'Enos', title: 'Enos'}, {id: 'Nephi', title: 'Nephi'}];
$scope.tableParams = new NgTableParams({page: 1, count: 10}, {data: data});
})
/* Styles go here */
This plunk is to try out select filtering in ngTable (link to the example - http://ng-table.com/#/filtering/demo-select).
Angualarjs version 1.3.7 & NgTable version 1.0.0-beta.6 is used.