简体   繁体   中英

angular price range filter not working

I have made a price range filter, and when the checkboxes are clicked, I want to show only those items that have the price falling in the price range specified by the checkbox

This is what I am following - http://jsfiddle.net/65Pyj/

HTML

<div class="checkbox">
    <input type="checkbox" ng-click="includePrice('0,700')" ng-checked=""/> Rs 700 and Below <br/>
    <input type="checkbox" ng-click="includePrice('701,1500')" ng-checked=""/> Rs 701 - 1500 <br/>
    <input type="checkbox" ng-click="includePrice('1501,3000')" ng-checked=""/> Rs 1501 - 3000 <br/>
     <input type="checkbox" ng-click="includePrice('3001,5000')" ng-checked=""/> Rs 3000 - 5000 <br/>
     <input type="checkbox" ng-click="includePrice('5001,100000000')" ng-checked=""/> Rs 5001 and Above
</div>

In the controller, I get the min and maximum of each checkbox into an array and again min and max of that array as the lower and upper limit

Controller

$scope.priceIncludes = [];
$scope.ranges = [];

$scope.includePrice = function(pricerange) {
    var i = $.inArray(pricerange, $scope.priceIncludes);
    if (i > -1) {
        $scope.priceIncludes.splice(i, 1);
        ranges = pricerange.split(',').splice(i, 1);
    } else {
        $scope.priceIncludes.push(pricerange);
    }
    var arrayString = $scope.priceIncludes.join();
    var rangeArray = arrayString.split(',')
    $scope.maxRange = function( rangeArray ){
        return Math.max.apply( Math, rangeArray );
    };
    $scope.minRange = function( rangeArray ){
        return Math.min.apply( Math, rangeArray );
    };
    $scope.ranges[1] = $scope.maxRange(rangeArray);
    $scope.ranges[0] = $scope.minRange(rangeArray);
}

$scope.priceFilter = function(searchResult) {
    if ($scope.priceIncludes.length > 0) {
        if ((parseInt(searchResult.fees) >= parseInt($scope.ranges[0])) && (parseInt(searchResult.fees) <= parseInt($scope.ranges[1])))
            return;
    }
    return searchResult;
}

When I use

filter:priceFilter

it returns random results which fall out of the selected min and max limit.

You are supposed to return the value if the condition is true. Not the other way around.

$scope.priceFilter = function(searchResult) {
        if ($scope.priceIncludes.length > 0) {
            if ((parseInt(searchResult.fees) >= parseInt($scope.ranges[0])) && (parseInt(searchResult.fees) <= parseInt($scope.ranges[1])))
        return searchResult;
        } else {
        return searchResult;
        }
    }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM