AngularJS filter issue for different filter

Question

I have car filter with different properties you can check my code below.

<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>

now my issue is that first two <li> working good because have the same attribute just_arrived. so if I select it gives my either all or either just arrived cars. but other two filters have different attributes : sale and popular. I need or operation between all these four filters.

I mean at a time it should filter only one attribute selected currently first two <li> working ok but if I select 3rd or 4th filter it making "and" operation with 1st or 2nd selected filters. I need like if I selected popular then the only result should be popular cars. if selected sold then need to be sold cars. if selected recently arrived cars then just recently arrived cars should only return. I mean at a time should apply one filter only.

any type of help is acceptable.

Angular controller

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, ",");
        };

}])

@dhavald99 how is your specFilter used for showing the appropriate cars? — tanmay
@tanmay specFilter.just_arrived. it means just_arrived is attribute in json file so it will compare like just_arrived = true in json file and will return result which cars has true values. it is currently filtering value but i need filter at a time one value should filter. currently if i filter just_arrived and again if i click on sold then it returns result just_arrived && sold. but it should returns result sold only because last i have clicked on sold. — dhavald99
@dhavald99 then why don't you do something like this? ng-click="specFilter = {}; specFilter.popular= true" in order to nullify already applied filters and set a new one! — tanmay

tanmay tanmay · Accepted Answer · 2016-12-24T09:18:09

Here, your problem is sale, popular and just_arrived filters are not having the same name and hence they are not overridden when you assign them true on ng-click. So, instead of just assigning them true, you can do something like this to avoid multiple filters (unintentionally) applying together:

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

This will nullify already applied filters and set a new one!

AngularJS filter issue for different filter

1 Answers