Question

我发布这篇文章时参考了这篇上一篇文章 Server-side paging+filtering+sorting for ng-grid with WebAPI，希望能够最终得出一个简单但有效的使用ng-grid和外部数据的样本源。到目前为止，我已经设法实现了外部分页和排序，但我遇到了过滤问题。

似乎ng-grid过滤器选项的filterText属性未绑定到视图。当我在ng-grid的过滤器文本中键入内容时，我的$ watch-ed函数不会被调用，因此我没有机会向服务器请求过滤数据。然而，当使用时，相同的表情表达工作正常。用于分页或排序。

通过挖掘一下，我发现这篇文章https://github.com/angular-ui/ng-grid/pull/456关于这个领域的一个错误，但目前尚不清楚这是否仍然是一个悬而未决的问题。有人可以帮忙吗？以下是相关的JS代码片段：

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();
}]);

Answer 1

这可能有点迟，但迟到总比没有好。）

我通过直接绑定到gridOptions的filterText属性（如下面的

）获得了成功

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

使用ng-grid的服务器端过滤：绑定问题？

1 个答案: