antonyboom antonyboom - 1 month ago 50
AngularJS Question

Select filter doesn't work with cellTemplate, angular ui-grid

I'm working with angular ui-grid library and faced with the problem. I cannot understand how to apply filter for cell with multiple values.
Columns category has an inner array, which I display thru cellTemplate like this

cellTemplate: "<div ng-repeat='item in row.entity[col.field]'>{{item.name}}</div>"


also in category column I have select filter with dynamic array, which I'm getting thru services

filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: $scope.categories
},


where $scope.categories comes from

lovServices.categories().then(function (result) {
angular.forEach(result, function (value) {
$scope.categories.push({
value: value.id,
label: value.name
});
});
});


But when I'm selecting any category filter it shows me an empty grid, I understand that grid filter cannot find any value, but the reason of it I cannot understand.

Could anybody help me to find my mistake? I appreciate any help.

Code:

app.controller('MainCtrl', function ($scope, $http, uiGridConstants, lovServices) {

$scope.categories = [];

// Get Grid Data
var getData = function () {
lovServices.eventTypes()
.then(function (response) {
//Initial Data
$scope.gridOptions.data = response;
});
};
var getOptions = function () {
lovServices.categories().then(function (result) {
angular.forEach(result, function (value) {
$scope.categories.push({
value: value.id,
label: value.name
});
});
});
};

// Ui-Grid Options
$scope.gridOptions = {
enableFiltering: true,
rowHeight: 60
};

// Ui-Grid Columns
$scope.gridOptions.columnDefs = [
{
displayName: 'Name',
field: 'name',
sort: {
direction: uiGridConstants.ASC
}
},
{
field: 'description',
},
{
field: 'category',
enableSorting: false,
filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: $scope.categories
},
cellTemplate: "<div ng-repeat='item in row.entity[col.field]'>{{item.name}}</div>"
}
];

$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;

};

//Get data
getData();
getOptions();

});


This is a plunker with my problem

Answer

Because the data you are filtering against is an array, and not a flat value, it must be compared through iteration.

That is to say, a anonymous function must be supplied as the condition key to the filter object, in order to iterate through the column values and figure out which one matches the search term.

Documentation

Example:

filter: {
    condition: function(searchTerm, cellValue, row, column) {
        var filtered = false;
        for (var i = 0; i < cellValue.length; i++) {
            filtered = cellValue[i].id === searchTerm;
            if (filtered) {
                break;
            }
        }
        return filtered;
    },
    type: uiGridConstants.filter.SELECT,
    selectOptions: $scope.categories
},

Updated plunkr