我参照本 previous后 Server-side分页+过滤+分拣NG-网格的WebAPI ，希望能够最终想出了一个简单而使用的工作NG网与外部数据源的样本。到现在为止，我已经成功地实现外部分页和排序，但我面临的问题与过滤。

它的好像纳克网过滤选项filterText属性未绑定到视图的。当我键入​​NG网我的$的手表-ED的功能不会被调用的过滤器的文本的东西，因此我没有机会要求过滤的数据到服务器。然而，如使用时同样的手表前pressions做工精细分页或排序。

通过了一下周围挖，我发现这个职位 https：//开头github上。 COM /角度的UI / NG网/拉/ 456了解权这方面的错误，但如果这仍是一个悬而未决的问题还不清楚。谁能帮助吗？下面是相关JS code片断：

  VAR应用= angular.module（'MyApp的'，['ngGrid']）;app.controller（'MainController'，['$范围，$ HTTP'，函数（$范围，$ HTTP）{    $ scope.items = [];    $ scope.filterOptions = {        filterText：，        useExternalFilter：真    };    $ scope.totalServerItems = 0;    $ scope.pagingOptions = {        页面大小：[25，50，100]，        每页：25，        当前页：1    };    $ scope.sortOptions = {        //为简洁起见省略...    };    $ scope.gridOptions = {        数据：项目，        columnDefs：            {场：ID，显示名：ID，宽：60}，            {字段：名称，显示名：姓名，pinnable：真正}，            {场：年龄，显示名：时代，宽：60}，            {场：isFemale显示名：F，宽：40}        ]        enablePaging：真实，        enablePinning：真实，        pagingOptions：$ scope.pagingOptions，        filterOptions：$ scope.filterOptions，        keepLastSelected：真实，        多选：假的，        showColumnMenu：真实，        showFilter：真实，        showGroupPanel：真实，        showFooter：真实，        的SortInfo：$ scope.sortOptions，        totalServerItems：totalServerItems        useExternalSorting：真实，        国际化：恩    };    $ scope.refresh =功能（）{        的setTimeout（函数（）{            //调用服务器和获取数据到$ scope.items ...        }，100）;    };    //这个工程    $范围。$腕表（'pagingOptions'，函数（的newval，OLDVAL）{        如果（的newval！== OLDVAL）{            $ scope.refresh（）;        }    }，真正的）;    //这不起作用：函数不会被调用    $范围。$腕表（'filterOptions'，函数（的newval，OLDVAL）{        如果（的newval！== OLDVAL）{            $ scope.refresh（）;        }    }，真正的）;    //这个工程    $范围。$腕表（'sortOptions'，函数（的newval，OLDVAL）{        如果（的newval！== OLDVAL）{            $ scope.refresh（）;        }    }，真正的）;    $ scope.refresh（）;}]）; 

解决方案

这可能是有点晚，但它的迟到总比不到好：）

我通过直接绑定到gridOptions像下面的filterText财产取得过成功。

  $范围。$腕表（'gridOptions。$ gridScope.filterText'，函数（的newval，OLDVAL）{        如果（的newval！== OLDVAL）{        }}，真正的）; 

I'm posting this with reference to this previous post Server-side paging+filtering+sorting for ng-grid with WebAPI, hoping to be able to finally come up with a simple, yet working sample of using ng-grid with external data sources. Up to this point, I've managed to implement external paging and sorting, but I'm facing an issue with filtering.

It seems like the filterText property of ng-grid filter options is not bound to the view. When I type something in the filter's text of the ng-grid my $watch-ed function does not get called, and thus I have no chance to request filtered data to the server. Yet, the same watch expressions work fine when used e.g. for paging or sorting.

By digging around a bit, I found this post https://github.com/angular-ui/ng-grid/pull/456 about a bug right in this area, but it's not clear if this is still an open issue. Could anyone help? Here is the relevant JS code snippet:

var app = angular.module('MyApp', ['ngGrid']);
app.controller('MainController', ['$scope', '$http', function ($scope, $http) {
    $scope.items = [];
    $scope.filterOptions = {
        filterText: "",
        useExternalFilter: true
    };
    $scope.totalServerItems = 0;
    $scope.pagingOptions = {
        pageSizes: [25, 50, 100],
        pageSize: 25,
        currentPage: 1
    };
    $scope.sortOptions = {
        // omitted for brevity...
    };

    $scope.gridOptions = {
        data: "items",
        columnDefs: [
            { field: "id", displayName: "ID", width: "60" },
            { field: "name", displayName: "Name", pinnable: true },
            { field: "age", displayName: "Age", width: "60" },
            { field: "isFemale", displayName: "F", width: "40" }
        ],
        enablePaging: true,
        enablePinning: true,
        pagingOptions: $scope.pagingOptions,        
        filterOptions: $scope.filterOptions,
        keepLastSelected: true,
        multiSelect: false,
        showColumnMenu: true,
        showFilter: true,
        showGroupPanel: true,
        showFooter: true,
        sortInfo: $scope.sortOptions,
        totalServerItems: "totalServerItems",
        useExternalSorting: true,
        i18n: "en"
    };

    $scope.refresh = function() {
        setTimeout(function () {
            // call the server and get data into $scope.items...
        }, 100);
    };

    // this WORKS    
    $scope.$watch('pagingOptions', function (newVal, oldVal) {
        if (newVal !== oldVal) {
            $scope.refresh();
        }
    }, true);

    // this DOES NOT WORK: the function never gets called
    $scope.$watch('filterOptions', function (newVal, oldVal) {
        if (newVal !== oldVal) {
            $scope.refresh();
        }
    }, true);

    // this WORKS
    $scope.$watch('sortOptions', function (newVal, oldVal) {
        if (newVal !== oldVal) {
            $scope.refresh();
        }
    }, true);

    $scope.refresh();
}]);

This might be bit late but its better late than never :)

I had success by directly binding to the filterText property of gridOptions like below

$scope.$watch('gridOptions.$gridScope.filterText', function (newVal, oldVal) {
        if (newVal !== oldVal) {
        }
}, true);