AngularJS过滤器问题为不同的过滤器

Question

我有汽车过滤器具有不同的属性，你可以检查我的代码如下。

<li><a ng-click="specFilter.just_arrived = ''"><h4>TODOS</h4></a></li> 
<li><a ng-click="specFilter.just_arrived = true"><h4>Recently arrived</h4></a></li> 
<li><a ng-click="specFilter.sale = true"><h4>sold</h4></a></li> 
<li><a ng-click="specFilter.popular= true"><h4>popular</h4></a></li> 

现在我的问题是，前两个<li>工作好，因为有相同的属性just_arrived。所以如果我选择它给我的所有或刚刚到达的汽车。但其他两个过滤器具有不同的属性：sale和popular。我需要或所有这四个过滤器之间的操作。

我的意思是，它应该只过滤一个属性，当前选择的前两个<li>工作正常，但如果我选择第三或第四个过滤器，使用第一或第二个选定过滤器进行“和”操作。我需要如果我选择流行，那么唯一的结果应该是流行的汽车。如果选择出售，则需要出售汽车。如果选择最近到达的汽车，那么刚刚抵达的汽车应该只能返回。我的意思是一次只应用一个过滤器。

任何类型的帮助都是可以接受的。

角控制器

angular.module('myCarApp').controller('carController', ['$scope', '$rootScope', '$http', '$state', '$timeout', function ($scope, $rootScope, $http, $state, $timeout) { 

    $scope.goToItem = function (car) { 
     $scope.idx = $scope.cars.indexOf(car); 
     $state.go('car', { 
      info: car.year + '-' + car.brand.replace(/\s+/g, '-').toLowerCase() + '-' + car.model.replace(/\s+/g, '-').toLowerCase() + '-' + $scope.idx 
     }); 
    } 

    $scope.specFilter = {}; 

    function getData() { 
     $rootScope.showLoader = true; 
     //HTTP Request 
     $http.get('jsonurl').success(function (data) { 
      $scope.cars = data; 

      $timeout(function() { 
       $rootScope.showLoader = false; 
      }, 2000) 
     }); 

    } 


    //PRICE SLIDER 
    $scope.sliderPrice = { 
     minValue: 0, 
     maxValue: 50000000, 
     options: { 
      floor: 0, 
      ceil: 50000000, 
      step: 100000, 
      minRange: 2000000, 
      maxRange: 50000000, 
      pushRange: true, 
      onChange: function() { 
       $(".rz-bubble").digits(); 
      }, 
      translate: function (value) { 
       return '$' + value; 
      } 
     } 
    }; 
    $scope.minFilterPrice = function (car) { 
     return car.price_offer >= $scope.sliderPrice.minValue; 
    }; 
    $scope.maxFilterPrice = function (car) { 
     return car.price_offer <= $scope.sliderPrice.maxValue; 
    }; 
    //--------------- 
    //KM SLIDER 
    $scope.sliderKm = { 
     minValue: 0, 
     maxValue: 200000, 
     options: { 
      floor: 0, 
      ceil: 200000, 
      step: 1000, 
      minRange: 1000, 
      maxRange: 200000, 
      pushRange: true, 
      onChange: function() { 
       $(".rz-bubble").digits(); 
      }, 
      translate: function (value) { 
       return value + ' Km'; 
      } 
     } 
    }; 
    $scope.minFilterKm = function (car) { 
     return car.km >= $scope.sliderKm.minValue; 
    }; 
    $scope.maxFilterKm = function (car) { 
     return car.km <= $scope.sliderKm.maxValue; 
    }; 

    $scope.getStyle = function (car) { 
     if (car.onHover) { 
      return { 
       "bottom": $(".car-overview").height() + 20 
      }; 
     } else { 
      return { 
       "bottom": "0" 
      }; 
     } 
    } 


    $scope.onHover = function (car) { 
     if ($(window).width() > 768) { 
      car.onHover = true; 
     } 
    } 


    $scope.onHoverOut = function (car) { 
     if ($(window).width() > 768) { 
      car.onHover = false; 
     } 
    } 

    getData(); 


    $scope.getFormattedNumber=function(x){ 

      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
     }; 

}]) 

Answer 1

在这里，你的问题是sale，popular和just_arrived过滤器不具有相同的名称，因此，当你在ng-click为它们分配true他们没有覆盖。因此，而不是只给它们分配true，你可以做这样的事情，以避免多重过滤器（无意）将一起：

ng-click="specFilter = {}; specFilter.popular= true" 

这将抵消已经应用过滤器，并设置一个新的！