不同过滤器的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"

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