根据角度js

时间:2015-11-25 09:31:48

标签: angularjs

[{
        "title":"Men's Polo",
        "sku":"menspolo",
        "img":"images/mens/mens polo front.png",
        "oldprice":675,
        "newprice":650,
        "latest":"latest",
        "desc":"Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit"

    },
    {
        "title":"Women's Full Sleeve",
        "sku":"womensfullsleeve",
        "img":"images/womens/women polo front.png",
        "oldprice":666,
        "newprice":633,
        "desc":"Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit"

    },
    {
        "title":"Women's Sleeve less",
        "sku":"menssleeveless",
        "img":"images/womens/womens hoodie front.png",
        "oldprice":599,
        "newprice":499,
        "desc":"Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit"

    },
    {
        "title":"Women's Hoodie",
        "sku":"menshoodie",
        "img":"images/womens/womens t-shirts-front.png",
        "oldprice":680,
        "newprice":650,
        "featured":"featured",
        "desc":"Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit"

    }
]

这是我的product.json文件,我正在开发商店应用程序,我想在页面中设置价格过滤器,

<form class="form-group form-inline">
    <input type="radio" name="filter" class="form-control"  ng-model="priceFilter" checked>&nbsp
    <label class="control-label">Low to High</label>&nbsp&nbsp
    <input type="radio" name="filter" class="form-control" value="reverse"  ng-model="priceFilter">&nbsp
    <label class="control-label">High to Low</label>
</form>

并且上面的代码是我的过滤器的HTML代码

<div class="ProductStore" ng-controller="ProductController">
            <div class="col-sm-4" ng-repeat="product in ProductList | filter:newprice | orderBy:newprice:priceFilter">
            <a href="#/details/{{ProductList.indexOf(product)}}" class="pdt-anchor">
            <div class="panel panel-primary" >
                <div class="panel-body">
                    <img ng-src="{{product.img}}" width="100%" height="100%">
                    <h4 class="pdt-title"><center>{{product.title}}</center></h4></a>
                    <center><p class="price"><span class="old">Rs.{{product.oldprice}}</span><span class="new">Rs.{{product.newprice}}</span></p></center>
                    <button class="btn btn-block btn-primary">Buy Now</button>
                    <button class="btn btn-block btn-warning">Add to cart</button>
                </div>
            </div>

这是重复产品的html代码,

我想要做的是当我点击&#34;从低到高&#34;单选按钮,我希望产品在低到高的价格范围内排列,当我点击&#34;从高到低&#34;单选按钮,我希望产品在高价格范围内上市。我该如何完成这项任务?

1 个答案:

答案 0 :(得分:2)

由于您希望priceFilter为真(以相反的顺序排序),当检查从高到低时,并且当检查从低到高时为假(按升序排序)时,您需要分配这些值到单选按钮:

<input type="radio" name="filter" class="form-control"  ng-model="priceFilter" ng-value="false" />
<label class="control-label">Low to High</label>

<input type="radio" name="filter" class="form-control"  ng-model="priceFilter" ng-value="true" />
<label class="control-label">High to Low</label>

此外,视图中的顺序应为

orderBy:'newprice':priceFilter

我不确定你对filter:newprice的意图是什么。它可能不应该存在。