我引用这篇上一篇文章 Server-side paging+filtering+sorting for ng-grid with WebAPI 发布这篇文章,希望能够最终提出一个简单但有效的示例,将 ng-grid 与外部数据源结合使用。到目前为止,我已经设法实现了外部分页和排序,但我遇到了过滤问题。
似乎 ng-grid 过滤器选项的 filterText 属性未绑定(bind)到 View 。当我在 ng-grid 的过滤器文本中键入内容时,我的 $watch-ed 函数不会被调用,因此我没有机会向服务器请求过滤后的数据。然而,相同的 watch 表达式在使用时可以正常工作,例如用于分页或排序。
通过深入挖掘,我发现这篇文章 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();
}]);
最佳答案
这可能有点晚,但迟到总比不到好:)
我通过直接绑定(bind)到 gridOptions 的 filterText 属性取得了成功,如下所示
$scope.$watch('gridOptions.$gridScope.filterText', function (newVal, oldVal) {
if (newVal !== oldVal) {
}
}, true);
关于angularjs - 使用 ng-grid : binding issue? 进行服务器端过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17862318/