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。所以如果我 select 它会给我全部或刚到的汽车。但其他两个过滤器具有不同的属性：sale 和 popular。我需要在所有这四个过滤器之间进行操作。

我的意思是一次它应该只过滤一个属性 select 目前前两个 <li> 工作正常但是如果我 select 第三或第四过滤它使 "and" 使用第一个或第二个 selected 过滤器进行操作。我需要像如果我 select 流行那么唯一的结果应该是流行的汽车。如果 selected sold 那么需要卖车。如果 selected 最近到达的汽车那么最近到达的汽车应该只有 return。我的意思是一次应该只应用一个过滤器。

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

Angular 控制器

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 过滤器没有相同的名称，因此当您将它们分配给 true 时它们不会被覆盖ng-click。因此，除了分配它们 true，您还可以这样做以避免多个过滤器（无意中）一起应用：

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

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

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

AngularJS filter issue for different filter

html

javascript

jquery

angularjs

angularjs-filter