Выбрать фильтр не работает с cellTemplate, угловая ui-сетка

Question

Я работаю с угловой библиотекой ui-grid и сталкиваюсь с проблемой. Я не могу понять, как применять фильтр для ячейки с несколькими значениями. категория Столбцы имеет внутренний массив, который я показываю через CellTemplate как этот

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

также в колонке категории У меня есть выберите фильтр с динамическим массивом, который я получаю через услугу

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

где $ scope.categories происходит от

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

Но когда я выбрать любую категорию фильтра он показывает мне пустую сетку, я понимаю, что сетки фильтра не может найти какую-либо ценность, но причина этого я не могу понять.

Может ли кто-нибудь помочь мне найти мою ошибку? Я ценю любую помощь.

Код:

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 с моей проблемой

Answer 1

Поскольку данные, которые вы фильтрование против является массивом, а не плоское значение, оно должно быть сравнены с помощью итерации.

То есть анонимная функция должна быть снабжена ключом condition объекту фильтра, чтобы перебирать значения столбцов и определять, какой из них соответствует поисковому запросу.

Documentation

Пример:

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