Question

我有一個NG重複兩個過濾器，像這樣：

<tr ng-repeat="c in datasets | filter:filterDataSet | filter:filterExpressionforPerspective | orderBy:'-id'" id="{{c.data_id}}" animate-on-change='c.program_name + c.organization + c.data_type_fmv_wami + c.perspective + c.status' ng-animate=" 'animate'"> 

如果我只有第一過濾器，「過濾器：filterDataSet」我所有的數據上正確顯示，當我到達頁面時的頁面。以下是我如何使用過濾器的代碼：filterDataSet：

Filter: <span class="input-icon"> 
      <input placeholder="Filter data set list ..." class="nav-search-input" ng-model="filterDataSet" ng-change="resetLimit();" autocomplete="off" type="text" style="width:300px;" focus> 
      <i class="search-icon fa fa-search nav-search-icon"></i> 
      </span> 

當我加入我的第二個過濾器「過濾器：filterExperessionforPerspective」數據頁面上不再顯示，只會顯示基於過濾器：filterExperessionforPerspective。以下是代碼過濾片段：使用filterExperessionforPerspective下拉：

角代碼

$scope.filterExpressionforPerspective = function(dataset) { 
     //console.log(dataset.perspective); 
     //console.log($scope.selectedPerspective.value); 
     return (dataset.perspective === $scope.selectedPerspective.value); 
    }; 

的Html下拉

<label for="PerspectiveDD">Perspective 
       <select name="PerspectiveDD" ng-model="selectedPerspective" style="color:black;" ng-options="Perspective as Perspective.value for Perspective in perspectiveOptions"> 
       {{selectedPerspective.value}} 
       </select> 
      </label 

試圖找出如何使用兩個濾波器作爲「OR '而不是鏈接作爲'和'...謝謝！

Answer 1

我結束了使用兩個單獨的過濾器：

的

<tr ng-repeat="c in datasets | filter: miataDataFilter | filter: filterDataSet | orderBy:'-id'" id="{{c.data_id}}" animate-on-change='c.program_name + c.organization + c.data_type_fmv_wami + c.perspective + c.dataset_status' ng-animate=" 'animate'"> 

filterDataSet正在利用動畫-ON-改變使用輸入的文字，如下所示：

<input placeholder="Filter data set list ..." class="nav-search-input" ng-model="filterDataSet" ng-change="resetLimit();" autocomplete="off" type="text" style="width:300px;" focus> 

miataDataFilter是駐留在我的datasetCtrl代碼自定義過濾器：

//custom filter to search dataset by Perspective and/or Data Type 
    $scope.miataDataFilter = function(dataset){ 
     //creating flags undefined and null selections 
     var selectivePerspectiveIsDefined = typeof $scope.selectedPerspective != 'undefined' && $scope.selectedPerspective != null; 
     var selectedDataTypeIsDefined = typeof $scope.selectedDataType != 'undefined' && $scope.selectedDataType != null; 

     //Perspective is only selected 
     if(selectivePerspectiveIsDefined && !selectedDataTypeIsDefined){ 
      return (dataset.perspective === $scope.selectedPerspective.value); 
     } 
     //Data Type is only selected 
     else if(!selectivePerspectiveIsDefined && selectedDataTypeIsDefined){ 
      return (dataset.data_type_fmv_wami === $scope.selectedDataType.value); 
     } 
     //Perspective and Data Type are both selected 
     else if (selectivePerspectiveIsDefined && selectedDataTypeIsDefined) 
     { 
      return (dataset.perspective === $scope.selectedPerspective.value && dataset.data_type_fmv_wami === $scope.selectedDataType.value) 
     } 
     //Nothing is selected 
     else 
      return true; 
    } 

Answer 2

創建自定義過濾器

angular.module('app', []) 
.filter('customeFilter', function(){ 
    return function(dataset, filter1, filter2){ 
     return dataset.filter(function(item){ 
     (item.property === filter1)|| (item.perspective === filter2.value) ; 
     } 
    } 
}); 

，並在你的HTML

<tr ng-repeat="c in datasets | customFilter: filterDataSet:selectedPerspective | orderBy:'-id'" id="{{c.data_id}}" animate-on-change='c.program_name + c.organization + c.data_type_fmv_wami + c.perspective + c.status' ng-animate=" 'animate'">