角度 UI 网格过滤器代码不起作用答案

【问题标题】：Angular UI-grid filter code not working角度 UI 网格过滤器代码不起作用
【发布时间】：2015-07-29 14:03:31
【问题描述】：

以下代码与教程http://ui-grid.info/docs/#/tutorial/321_singleFilter 中的代码相似，但它不显示数据网格，我不知道为什么

我检查了 plunk 并没有发现任何错误，下面是我的代码

var app = angular.module('app', ['ngTouch', 'ui.grid'])

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

    $scope.gridOptions = {
        enableFiltering: false,
        onRegisterApi: function(gridApi) {
            $scope.gridApi = gridApi;
            $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200);
        },
        columnDefs: [
            {
                field: 'name'
            }, {
                field: 'last'
            }, {
                field: 'address'
            }, {
                field: 'name1'
            }, {
                field: 'last1'
            }, {
                field: 'address1'
            }, {
                field: 'last45'
            }
        ],
        data: [
            {
                "name": "test",
                "last": "test2",
                "address": "test3",
                "name1": "test",
                "last1": "test2",
                "address1": "test3",
                "last45": "op"
            }, {
                "name": "test",
                "last11": "test2",
                "address": "test2"
            }, {
                "name": "test",
                "last": "test2",
                "address": "test3"
            }, {
                "name": "test",
                "last": "test2",
                "address": "test3"
            }, {
                "name": "test",
                "last": "test2",
                "address": "test3"
            }, {
                "name": "test",
                "last": "test2",
                "address": "test3"
            }, {
                "name": "test",
                "last": "test2",
                "address": "test3"
            }
        ]
    };


    $scope.filter = function() {
        $scope.gridApi.grid.refresh();
    };

    $scope.singleFilter = function(renderableRows) {
        var matcher = new RegExp($scope.filterValue);
        renderableRows.forEach(function(row) {
            var match = false;
            ['name', 'last', 'address'].forEach(function(field) {
                if (row.entity[field].match(matcher)) {
                    match = true;
                }
            });

            if (!match) {
                row.visible = false;
            }
        });
        return renderableRows;
    };
})

【问题讨论】：

哪个部分不工作？我在您的 plunk 中看到了网格，并且您的数据已被填充。如果您的过滤器有问题...我在您的控制器中没有看到实际的过滤器功能，所以ng-click='filter()' 在您的 plunk 中什么也不做。在您帖子的示例代码中，您有 enableFiltering: false,
在您的 plnkr 中定义的唯一内容是“$scope.gridOptions”变量。也许那是你的问题。您缺少一半的代码。
@Sapy $scope.filter 是函数不要检查 plunk 中的代码我已经在那里更改了它
@ilmgb : 我没听明白，请在 stackoverflow 上写我的代码，它包含所有 plunk ignore

标签： javascript angularjs angular-ui-grid

【解决方案1】：

您的问题似乎是因为数据。由于您的数据没有每一行的所有列。你必须修复你的 singleFilter 方法来检查这种情况。

$scope.singleFilter = function(renderableRows) {
var matcher = new RegExp($scope.filterValue);
renderableRows.forEach(function(row) {
  var match = false;
  ['name', 'last', 'address'].forEach(function(field) {

    if (row.entity[field] && row.entity[field].match(matcher)) {
      match = true;
    }
  });
  if (!match) {
    row.visible = false;
  }
});
return renderableRows;
};

检查此 plnk 以获取工作版本http://plnkr.co/edit/l7Uc3H0CnoyRkaHdNZ9P?p=preview

【讨论】：