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>正常工作，但是如果我选择第三或第4个过滤器，则使用第一个或第二个选定的过滤器进行操作。我需要像我选择受欢迎的那样，唯一的结果应该是受欢迎的汽车。如果选择出售，则需要出售汽车。如果最近被选为到达汽车，那么最近才到达汽车只能返回。我的意思是一次只应用一个过滤器。

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

角控制器

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"

这将无效已应用的过滤器并设置一个新的！