【问题标题】:angular price range filter not working角度价格范围过滤器不起作用
【发布时间】:2016-09-26 15:52:26
【问题描述】:

我已经做了一个价格范围过滤器,当点击复选框时,我只想显示那些价格在复选框指定的价格范围内的商品

这就是我正在关注的 - 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>

在控制器中,我将每个复选框的最小值和最大值放入一个数组中,然后将该数组的最小值和最大值作为下限和上限

控制器

$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;
}

当我使用时

filter:priceFilter

它返回超出所选最小和最大限制的随机结果。

【问题讨论】:

  • 我已经使用 parseInt 进行转换..那么它应该工作吗
  • 创建一个复制问题的演示
  • @charlietfl - 抱歉,我之前不能这样做 - 我创建了一个小提琴。正在发生的事情是,它返回没有过滤项目的结果,而不仅仅是过滤项目 - jsfiddle.net/da60e8zg

标签: angularjs checkbox filter angular-filters


【解决方案1】:

如果条件为真,您应该返回该值。 反之亦然。

$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;
        }
    }

【讨论】:

  • 当我这样做时......但没有改变......同样的行为
  • 是的,这是可行的,但如果没有选择任何内容,我想显示所有结果
  • 如果 priceIncludes 为空,则直接返回值。检查答案中的更新代码。
猜你喜欢
  • 2021-08-12
  • 1970-01-01
  • 2023-04-03
  • 1970-01-01
  • 2016-04-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多