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

}])

Answer 1

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!