在AngularJS中使用多重過濾器而無需鏈接

Question

我在ng-repeat上有兩個過濾器，如下所示：

<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'">

如果我只有第一個過濾器，則當我到達頁面時，'filter：filterDataSet'的所有數據都會正確顯示在頁面上。 以下是我如何使用filter：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>

當我添加第二個過濾器“ filter：filterExperessionforPerspective”時，數據將不再顯示在頁面上，而只會基於filter：filterExperessionforPerspective顯示。 以下是使用下拉列表的filter：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

試圖弄清楚如何將兩個過濾器都用作“或”而不是鏈接為“與” ...謝謝！

Answer 1

創建一個自定義過濾器

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'">

Answer 2

我最終使用了兩個單獨的過濾器：

<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利用輸入的文本利用變化動畫，例如：

<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是駐留在我的數據集中的自定義過濾器Ctrl代碼：

//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;
    }