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" 

這將抵消已經應用過濾器，並設置一個新的！