Filter concatenated data in a data table

Question

I am trying to apply filter to my data table.

        <div class="widget-content  table-container" ng-controller="getEmployeesController" style="overflow:auto">

            <table ng-table="employeesList" show-filter="true" class="table table-striped table-bordered">
                <tr ng-repeat="employee in $data">
                    <td data-title="'#'">
                        {{ (itemsPerPage * (pageNumber-1)) + $index+1 }}
                    </td>
                    <td data-title="'Name'" sortable="'Name'" filter="{ 'firstName+lastName': 'text' }">
                        {{employee.firstName +""+employee.lastName}}
                    </td>
                    <td data-title="'First Name'" sortable="'firstName'" filter="{ 'firstName': 'text' }">
                        {{employee.firstName}}
                    </td>
                    <td data-title="'Last Name'" sortable="'lastName'" filter="{ 'lastName': 'text' }">
                        {{employee.lastName}}
                    </td>
                </tr>
            </table>
        </div>

The filtering works fine in 2nd and 3rd . I want a TD where the first name and second name is concatenated.

App.js

//Datatable
myApp.factory('dataTable', ['$filter', 'ngTableParams', '$rootScope', function ($filter, ngTableParams, $rootScope) {

    var factoryDefinition = {
      render: function($scope, config, componentId, data) {
          if (!config) config = { filter: { 'firstName': $rootScope.mysearch } };

        var config = angular.extend({}, {page:1, count:10}, config)

        $scope[componentId] = new ngTableParams(config, {
            total: data.length, // length of data
            getData: function ($defer, params) {
                // organize filter as $filter understand it (graph object)
                var filters = {};
                var val = $rootScope.mysearch;
                var key = "firstname";
                $rootScope.mysearch = "";

                angular.forEach(params.filter(), function (val, key) {
                    var filter = filters;
                    var parts = key.split('.');
                    for (var i = 0; i < parts.length; i++) {
                        if (i != parts.length - 1) {
                            filter[parts[i]] = {};
                            filter = filter[parts[i]];
                        }
                        else {
                            filter[parts[i]] = val;
                        }
                    }
                });
                // use build-in angular filter
                var filteredData = params.filter() ?
                        $filter('filter')(data, filters) :
                        data;
                var orderedData = params.sorting() ?
                        $filter('orderBy')(filteredData, params.orderBy()) :
                        data;
                params.total(orderedData.length); // set total for recalc pagination
                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                $scope.pageNumber = params.page();
                $scope.itemsPerPage = params.count();
            }
        }); 


      }
    }

    return factoryDefinition;
  }
]);
myApp.filter('customFilter', ['$filter', function ($filter) {
    var filterFilter = $filter('filter');
    var standardComparator = function standardComparator(obj, text) {
        text = ('' + text).toLowerCase();
        return ('' + obj).toLowerCase().indexOf(text) > -1;
    };

    return function customFilter(array, expression) {
        function customComparator(actual, expected) {

            var isBeforeActivated = expected.before;
            var isAfterActivated = expected.after;
            var isLower = expected.lower;
            var isHigher = expected.higher;
            var higherLimit;
            var lowerLimit;
            var itemDate;
            var queryDate;

            if (ng.isObject(expected)) {
                //exact match
                if (expected.distinct) {
                    if (!actual || actual.toLowerCase() !== expected.distinct.toLowerCase()) {
                        return false;
                    }

                    return true;
                }

                //matchAny
                if (expected.matchAny) {
                    if (expected.matchAny.all) {
                        return true;
                    }

                    if (!actual) {
                        return false;
                    }

                    for (var i = 0; i < expected.matchAny.items.length; i++) {
                        if (actual.toLowerCase() === expected.matchAny.items[i].toLowerCase()) {
                            return true;
                        }
                    }

                    return false;
                }

                //date range
                if (expected.before || expected.after) {
                    try {
                        if (isBeforeActivated) {
                            higherLimit = expected.before;

                            itemDate = new Date(actual);
                            queryDate = new Date(higherLimit);

                            if (itemDate > queryDate) {
                                return false;
                            }
                        }

                        if (isAfterActivated) {
                            lowerLimit = expected.after;


                            itemDate = new Date(actual);
                            queryDate = new Date(lowerLimit);

                            if (itemDate < queryDate) {
                                return false;
                            }
                        }

                        return true;
                    } catch (e) {
                        return false;
                    }

                } else if (isLower || isHigher) {
                    //number range
                    if (isLower) {
                        higherLimit = expected.lower;

                        if (actual > higherLimit) {
                            return false;
                        }
                    }

                    if (isHigher) {
                        lowerLimit = expected.higher;
                        if (actual < lowerLimit) {
                            return false;
                        }
                    }

                    return true;
                }
                //etc

                return true;

            }
            return standardComparator(actual, expected);
        }

        var output = filterFilter(array, expression, customComparator);
        return output;
    };
}]);

Controller

myApp.controller('getEmployeesController', ['$scope', 'employeeServices', 'dataTable', '$window', '$timeout', '$filter', '$rootScope', 'ngDialog',
    function ($scope, employeeServices, dataTable, $window, $timeout, $filter, $rootScope, ngDialog) {
    employeeServices.getEmployees().then(function (result) {
        $scope.data = result.data;
    });

The concatenated TD is not getting filtered properly. What should I do to make it functional?

Answer 1

Found the solution,

Created a new property in the collection and then set it to concatenated object to resolve the issue. Controller :

myApp.controller('getEmployeesController', ['$scope', 'employeeServices', 'dataTable', '$window', '$timeout', '$filter', '$rootScope', 'ngDialog',
    function ($scope, employeeServices, dataTable, $window, $timeout, $filter, $rootScope, ngDialog) {
    employeeServices.getEmployees().then(function (result) {
        $scope.data = result.data;
        angular.forEach(result.data, function (value, key) {
            if (value.lastName == undefined) {

            }
            var fullName = value.firstName + '' + ((value.lastName != undefined) ? (value.lastName) : (''));
            result.data[key].fullName = fullName;

        });
  });

HTML:

<td data-title="'Name'" sortable="'firstName'" filter="{ 'fullName': 'text' }" style="width:100px">
                                {{employee.fullName}}
                            </td>