<!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 filtering array columns</h1>
<div ng-controller="myFilterController as myCtrl">
<table ng-table="myCtrl.tableParams" class="table table-condensed table-bordered table-striped table-vmiddle" show-filter="true">
<tr ng-repeat="item in $data">
<td data-title="'Name'" sortable="'name'" filter="{'name': 'text'}">{{item.name}}</td>
<td data-title="'Users'">
<span style="margin-right: 10px; border: 1px solid black;" ng-repeat="user in item.users">{{user.firstname}} {{user.lastname}}</span>
</td>
<td data-title="'Remark'" sortable="'remark'" filter="{'remark': 'text'}">{{item.remark}}</td>
</tr>
</table>
</div>
</body>
</html>
// Code goes here
var app = angular.module('ngTableApp', ['ngTable'])
.controller('myFilterController', function($scope, $filter, $q, NgTableParams) {
var ctrl = this;
ctrl.data = [{
name: 'Test A',
remark: 'test A',
users: [
{_id: 1234, firstname: 'A', lastname: 'B'},
{_id: 2345, firstname: 'B', lastname: 'C'},
{_id: 3456, firstname: 'C', lastname: 'D'},
{_id: 4567, firstname: 'D', lastname: 'E'},
]
},
{
name: 'Test B',
remark: 'test B',
users: [
{_id: 1234, firstname: 'A', lastname: 'B'},
{_id: 5678, firstname: 'E', lastname: 'F'},
{_id: 3456, firstname: 'C', lastname: 'D'},
]
},
{
name: 'Test C',
remark: 'test C',
users: [
{_id: 5678, firstname: 'E', lastname: 'F'}
]
}];
ctrl.tableParams = new NgTableParams({
page: 1, count: 10,
sorting: {name: 'asc'}
},
{
data: ctrl.data
});
}
)
/* Styles go here */
little plnkr for:
http://stackoverflow.com/questions/42505046/ngtable-filter-column-with-array-data