在AngularJS中使用多重过滤器而无需链接

Question

I have two filters on an ng-repeat like so:

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

If I only have the first filter, 'filter:filterDataSet' all of my data is properly displayed on the page when I arrived on the page. The following is the code how I am using 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>

When I add my second filter 'filter:filterExperessionforPerspective' the data no longer displays on the page and will only display based on filter:filterExperessionforPerspective. The following is a snippet of code for filter:filterExperessionforPerspective using a dropdown:

Angular code

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

Html dropdown

<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

Trying to figure out how to use both filters as an 'OR' instead of chaining as an 'AND'...thanks!

Answer 1

create a custom filter

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

and in your 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

I ended up using two separate filters:

<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 is taking advantage of animate-on-change using inputted text like so:

<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 is a custom filter that resides in my datasetCtrl code:

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