ngGrid多列過濾

我正在使用AngularJS的ngGrid模塊來顯示一些分頁數據。我希望能夠搜索多個列，但使用OR搜索。ngGrid多列過濾

可以說我有一個包含以下標題的列：Id，Name，Description。當我搜索時，我想返回Id或name或description包含搜索詞的所有行。

$scope.filterUpdated = function() { 
    $scope.gridOptions.filterOptions.filterText = 'id:' + $scope.filterText + ';name:' + $scope.filterText + ';description:' + $scope.filterText; 
};

然而，這似乎做的：

$scope.pagingOptions = { 
     pageSizes: [20, 50, 100], 
     pageSize: 20, 
     totalServerItems: 0, 
     currentPage: 1 
    }; 

    $scope.gridOptions = 
     { 
      data: 'myData', 
      columnDefs: [ 
       { field: 'id', displayName: 'Id' }, 
       { field: 'name', displayName: 'Name' }, 
       { field: 'description', displayName: 'Description' }, 
       { displayName: 'Actions', cellTemplate: '<input type="button" data-ng-click="doSomething(row.entity)" value="Do Something" />'}], 
      enablePaging: true, 
      showFooter: true, 
      showFilter: true, 
      pagingOptions: $scope.pagingOptions, 
      filterOptions: { 
       filterText: "", 
       useExternalFilter: false 
      } 
     };

我已經使用默認的搜索框，並使用綁定到$ scope.filterText外部輸入對話框來定義自定義過濾器，例如嘗試並在所有列上。是否有可能實現我想要使用ngGrid模塊？

由於提前，

克里斯

來源

2013-05-30 Chris Haines

我是AngularJS的新手，但通過johnlindquist/eggheadio/www.egghead.io瀏覽過所有視頻，我想這[ngfilter]（http://www.egghead.io/video/bLohP9mh8ks）視頻回答你的題。他開始解釋你如何在3點左右使用不同的搜索過濾器;從搜索所有列開始，然後轉到特定列。 – Pixic

可能是這個討論可以幫助你。 [ng-grid filter per column]（https://groups.google.com/forum/#!topic/angular/aC24cVln4Vw） – darwinbaisa

是的，您可以藉助網格配置中的內部過濾選項來實現通過列進行過濾。我很快就會把這個笨蛋放到它上面，回答 – orif

是有可能做一個或過濾器，但在NG-電網源代碼中搜索我看不出它如何使用他們的filterOptions.filterText完成後。這隻能做和過濾。

解決辦法是再使用filterOptions.useExternalFilter:true

我還沒有發現這樣的例子，但與玩弄了一會兒後，我得到的概念，過濾器實際上是由重新創建gridOptions.data完成對象|陣列。 這是這個過濾器唯一的缺點。

Plunker code is here

所以基本上你的代碼看起來像這樣index.html的：

<body ng-controller="MyCtrl"> 
    <strong>Filter Name:</strong> </string><input type="text" ng-model="filterName"/> 
    </br> 
    OR 
    </br> 
    <strong>Filter Age:</strong> </string><input type="text" ng-model="filterAge"/> 
    </br> 
    <button ng-click="activateFilter()">Run Filter</button> 
    <br/> 
    <br/> 
    <div class="gridStyle" ng-grid="gridOptions"></div> 
</body>

而在你controller.js：

app.controller('MyCtrl', function($scope) { 

$scope.filterOptions = { 
    filterText: '', 
    useExternalFilter: true 
}; 

$scope.activateFilter = function() { 
    var name = $scope.filterName || null; 
    var age = ($scope.filterAge) ? $scope.filterAge.toString() : null; 
    if (!name && !age) name=''; 

    $scope.myData = angular.copy($scope.originalDataSet, []); 
    $scope.myData = $scope.myData.filter(function(item) { 
    return (item.name.indexOf(name)>-1 || item.age.toString().indexOf(age) > -1); 
    }); 
}; 

$scope.originalDataSet = [{name: "Moroni", age: 50}, 
       {name: "Tiancum", age: 43}, 
       {name: "Jacob", age: 27}, 
       {name: "Nephi", age: 29}, 
       {name: "Enos", age: 34}]; 

$scope.myData = angular.copy($scope.originalDataSet, []); 

$scope.gridOptions = { 
    data: 'myData', 
    filterOptions: $scope.filterOptions 
}; 
});

這只是基本過濾（美國se正則表達式和/或轉換爲小寫字母以獲得更好的匹配）。還要注意，如果名稱和年齡都爲空，我將名稱設置爲''，然後每個元素都將在過濾器內返回true（導致整個數據集返回）。

此選項是更適合於動態數據集（讀 - 服務器喂），但它工作得很好，但複製的原始數據集，並在其上應用的過濾器。

來源

2013-08-24 17:19:59

+1，爲我工作！ –

ngGrid多列過濾

回答

相關問題