服務器端與NG-電網濾波器，結合問題？

我參照這個以前的帖子Server-side paging+filtering+sorting for ng-grid with WebAPI發佈此，希望能夠最終想出了一個簡單的，但工作使用NG網與外部數據源的樣本。到目前爲止，我已經設法實現了外部分頁和排序，但是我面臨着一個過濾問題。服務器端與NG-電網濾波器，結合問題？

它看起來像ng-grid過濾器選項的filterText屬性沒有綁定到視圖。當我鍵入NG網我的$手錶版功能不被調用的過濾器的文本的東西，因此我沒有機會要求過濾的數據到服務器。然而，相同的手錶表達式在使用時可以很好地工作用於分頁或排序。

通過挖掘一下，我發現這篇文章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(); 
}]);

來源

2013-07-25 Naftis

你有沒有發現這方面的任何解決方案？ – Jardalu

對不起，我沒有，因爲在此期間其他要求導致我切換到我的應用其他類型的數據呈現。然而，對於需要網格的場景，有一個簡單實用的例子會很好。 – Naftis

這可能是由像下面

直接綁定到gridOptions的filterText財產是有點晚了，但其總好過從未:)

我成功

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

來源

2014-07-10 10:40:39 cackharot

感謝兄弟，這項工作在我身上。 '$ gridScope'是關鍵@ _ @ – GusDeCooL

+1和感謝兄弟！ –

服務器端與NG-電網濾波器，結合問題？

回答

相關問題