Question

我想问一下。我已经搜索了angularjs过滤器，但还没找到我的解决方案。我使用角度来制作带有IONIC框架的Android应用程序。

我有价格数据。我想按价格范围过滤它。

例如：

name      type        price
item01    fruit       25000
item02    vegetable   50000
item03    vegetable   10000

我有2个选择框用于过滤

<select ng-value="fprice">
   <option value="">All</option>
   <option value="0">0-24999</option>
   <option value="25000">25000-49999</option>
</select>

<select ng-value="ftype">
   <option value="">All</option>
   <option value="fruit">Fruit</option>
   <option value="vegetable">Vegetable</option>
</select>

我想如果我选择第二个值（价格），则item02没有显示。

我有像

这样的代码

<ion-list>
    <ion-item ng-repeat="item in items | filter: { type: ftype, price: ??? }">
    {{item.name}}<br>
    {{item.type}}<br>
    {{item.price}}
    </ion-item> 
</ion-list>

我的代码中???的代码是什么？我尝试了一些，但仍然没有找到我想要的东西。

谢谢。抱歉英文不好。

Answer 1

您可以创建自定义过滤器。我在jsfiddle

上发布了示例

在过滤器中，您可以放置您想要的内容。

我的自定义过滤器

autoDrops.filter('filterCostum', function () {
    return function (datas, fprice, ftype) {
            console.log(ftype)

        var options = [];
        angular.forEach(datas, function (data) {
                if(ftype != ""){
                if (data.type == ftype) {
                 if(fprice == ""){
                                     options.push(data);

                    }
                    else if(fprice == 0){
                            if(data.price >= 0 && data.price <=24999)
                            options.push(data);
                    }
                    else if(fprice == 25000){
                        if(data.price >= 25000 && data.price<=49999)
                      options.push(data);
                    }
                    }
            }
            else{
            console.log(fprice)
             if(fprice == ""){
                                     options.push(data);

                    }
                    else if(fprice == 0){
                            if(data.price >= 0 && data.price <=24999)
                            options.push(data);
                    }
                    else if(fprice == 25000){
                        if(data.price >= 25000 && data.price<=49999)
                      options.push(data);
                    }
                    }

            });

        return options;
    }
})

我这样打电话

<div ng-app="autoDrops" ng-controller="DropsController">
<select ng-model="fprice">
   <option value="">All</option>
   <option value="0">0-24999</option>
   <option value="25000">25000-49999</option>
</select>

<select ng-model="ftype">
   <option value="">All</option>
   <option value="fruit">Fruit</option>
   <option value="vegetable">Vegetable</option>
</select>
 <div>
     <div>
        <div ng-repeat="elem in datas | filterCostum: fprice: ftype">
        {{elem}}
        </div>
    </div>
    <div>

链接已编辑

angularjs - 2个数字之间的过滤值

1 个答案: