如何为 Angular ui 网格中的每一列更改过滤器文本？答案

【问题标题】：How can I get changed filter text for each column in Angular ui grid?如何为 Angular ui 网格中的每一列更改过滤器文本？
【发布时间】：2015-04-21 19:58:03
【问题描述】：

我正在使用新的 Angular uigrid。但我认为文档对于搜索来说真的很差。我没有找到过滤所需的信息。我将使用服务器端过滤。所以我必须为每一列更改过滤器文本。请帮帮我？

我试过这段代码。但可能是用于 ng grid(old grid)

$scope.$watch('completedgridOptions.filterOptions.filterText', function (newVal, oldVal) {
            if (newVal !== oldVal) {
                console.log("Filter");
            }
        }, true);

【问题讨论】：

标签： angularjs filtering angular-ui-grid

【解决方案1】：

 $scope.gridOptions.data = $scope.data;//initialiazing grid with data
 $scope.gridApi.core.on.filterChanged($scope, function () {
       var grid = this.grid;
       //do your stuff here           
 });

基本上，只有在网格被数据初始化后，我才能在网格上使用 filterchanged 功能。

因此，只有在使用数据初始化网格后，才按照建议将 sn-p 放入线程中。

为了方便起见，我使用了如下的 $timeout。

$timeout(function () {
     $scope.getData();//get your data from ajax call or from where ever your data is
     $scope.assignDatatoGrid();//assign the data to grid or initialize the grid with data
     $scope.$apply();
     //this feature is available only after the grid gets populated with data
     $scope.gridApi.core.on.filterChanged( $scope, function() {
         var grid = this.grid;
     });
}, 2000);

它对我有用

谢谢

【讨论】：

【解决方案2】：

如果你想检查什么是什么：

      $scope.gridApi.core.on.filterChanged($scope, function () {
             var grid = this.grid;
             $.each(grid.columns, function (index, column) {
                   switch (column.field) {
                        case 'externalIdentifier':
                             $scope.identifier = column.filters[0].term;
                             break;
                        case 'name':
                             $scope.name = column.filters[0].term;
                             break;
                        case 'status':
                             $scope.status = column.filters[0].term;
                             break;
                        ....
                        ....
                        ....
                   }
            });
            //you have to move it by hand, if you are on the third page and filter, it will stay on the third page, even though you will not have any data there
            grid.options.paginationCurrentPage = 1; 

            //use the timeout so that you don't get a db call at every key pressed                                
            if (angular.isDefined($scope.filterTimeout)) {
               $timeout.cancel($scope.filterTimeout);
            }
            $scope.filterTimeout = $timeout(function () {
                 getPage();  //this will call your data from the db
                 }, 500);
            });

     var getPage = function () {
           itemsPerPage = paginationOptions.pageSize;
           offset = (paginationOptions.pageNumber -1) * paginationOptions.pageSize;
           getDataByFilter($scope.name, $scope.identifier, $scope.status, offset, itemsPerPage)
}

【讨论】：

【解决方案3】：

我也是使用 Angular 的新手，但试试这个：

$scope.gridApi.core.on.filterChanged($scope, function () {
   var grid = this.grid;
   for (var i = 0; i < objGrid.columns.length; i++) {
      term = objGrid.columns[i].filter.term;
      field = objGrid.columns[i].field;
      console.log('Field: ' + field + '\nSearch Term: ' + term);
   }
});

【讨论】：

我收到一个未定义的核心错误。你什么时候放这个功能？
Angular 中有一个错误，除非网格中有数据，否则不允许初始化 gridApi。我认为他们正在努力解决问题，但这就是我遇到的问题。所以我通过在 Grid 使用数据初始化之后将该函数放入来修复它。