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'时，数据不再显示在页面上，只会根据过滤器显示：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”而不是链接为“AND”...谢谢！

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是一个自定义过滤器，位于我的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;
    }

在AngularJS中使用多个过滤器而没有链接

2 个答案: