that_developer that_developer - 5 months ago 25
AngularJS Question

Using multiples filters WITHOUT chaining in AngularJS

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

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