angular search filter
angular custom multi value search filter
HTML
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<section ng-controller="MyCtrl">
<section>
<h2>Fields allowed for filter</h2>
<pre>filterFields: {{ filterFields | json }}</pre>
<p>
Search: <input type="text" ng-model="searchInput" />
</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th>Company</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in list | search:searchInput:filterFields">
<td>{{ user.name }}</td>
</tr>
</tbody>
</table>
</section>
</section>
JavaScript
(function (app) {
app.controller('MyCtrl', ['$scope', function ($$) {
$$.filterFields = ['name', 'company'];
$$.searchInput = '';
$$.list = [
{name: 'John', surname: 'Adams', age: 23, company: 'Google Plus'},
{name: 'Adrianna', surname: 'Olkovsky', age: 80, company: 'Google Plus'},
{name: 'Mark', surname: 'Miedwiediew', age: 16, company: 'Google Plus'},
{name: 'Jacob', surname: 'Niedźwiedzki', age: 13, company: 'Google Minus'},
{name: 'Rachela', surname: 'Goldmann', age: 23, company: 'Facebook Plus'},
{name: 'John', surname: 'Putin', age: 33, company: 'NKWD'},
{name: 'Adam', surname: 'Markus', age: 33, company: 'SS'}
];
}]);
app.filter('search', function () {
return function (list, query, fields) {
if (!query) {
return list;
}
query = query.toLowerCase().split(' ');
if (!angular.isArray(fields)) {
fields = [fields.toString()];
}
return list.filter(function (item) {
return query.every(function (needle) {
return fields.some(function (field) {
var content = item[field] != null ? item[field] : '';
if (!angular.isString(content)) {
content = '' + content;
}
return content.toLowerCase().indexOf(needle) > -1;
});
});
});
};
});
}(angular.module('myApp', [])));