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

此处，您的问题是provider: local: box: puphpet/ubuntu1604-x64 box_url: puphpet/ubuntu1604-x64 box_version: '0' chosen_virtualizer: virtualbox ... mongodb: install: '1' settings: bind_ip: ['127.0.0.1', '192.168.10.10'] port: '27017' globals: version: '3.4.0' databases: { }，sale和popular过滤器名称不同，因此在just_arrived true上ng-click时，它们不会被覆盖1}}。所以，不要只是分配它们true，你可以这样做，以避免多个过滤器（无意中）一起应用：

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

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

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

1 个答案: