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

选择过滤器不适用于cellTemplate，angular ui-grid

1 个答案: