I have developed an AngularJs application using ngTable to display user data. As per the requirements, I need to filter by a concatenated string of first and last name in a single column. Despite attempting to create a custom filter following the guidelines on , I have been unsuccessful so far.
While I could modify the scope upon receiving the data by iterating through the array, considering that the result set is expected to be large, it may not be the ideal approach.
Below is a simplified example. Is there a way in Angular to filter by the combined string using a model or a filter?
var app = angular.module('app', ['ngTable']);
app.controller('IndexCtrl', function ($scope, $filter, ngTableParams) {
$scope.people = [{
"id": 1,
"firstName": "Chuck",
"lastName": "Norris",
}, {
"id": 2,
"firstName": "John",
"lastName": "Lennon",
}, {
"id": 3,
"firstName": "Bender",
"lastName": "Rodriguez",
}];
$scope.peopleCopy = $scope.people;
$scope.mytable = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'desc'
}
}, {
getData: function ($defer, params) {
$scope.people = angular.copy($scope.peopleCopy);
var filteredData = $filter('filter')($scope.people, params.filter());
$scope.people = $filter('orderBy')(filteredData, params.orderBy());
$defer.resolve($scope.people);
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
<body ng-app="app">
<div ng-controller="IndexCtrl">
<table border="1" ng-table="mytable" show-filter="true">
<tr ng-repeat="person in $data">
<td sortable="id" data-title="'Id'">{{person.id}}</td>
<!--td I want to sort by firstName + lastName -->
<td sortable="firstName" filter="{ 'firstName': 'text' }" data-title="'Name'">{{person.firstName +' '+ person.lastName}}</td>
</tr>
</table>
</div>
</body>