Angularjs 基于价格的产品分类

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

[{
        "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"

    }
]

 
从低到高
 
从高到低

上面的代码是我的过滤器的html代码

<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>

Rs.{{product.oldprice}}Rs.{{product.newprice}
立即购买
添加到购物车

这是重复产品的html代码

---

我想做的是，当我单击“从低到高”单选按钮时，我希望产品排列在从低到高的价格范围内，当我单击“从高到低”单选按钮时，我希望产品列在从高到低的价格范围内。如何完成此任务？

由于您希望在选中从高到低时

priceFilter

为true（按相反顺序排序），而在选中从低到高时为false（按升序排序），因此需要将这些值分配给单选按钮：

<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>

---

我也不确定您使用

过滤器：newprice

的目的是什么。它可能不在那里。

使用ng repeat=“ProductList中的产品| orderBy:orderProp:isReverse”并在单选按钮上为isReverse设置true | false。有关更多详细信息，请查看此线程。这会根据价格反转产品吗？您需要指定此排序所需的列。您需要将“orderProp”替换为您的专栏“newprice”，谢谢，我没有弄错！请给我解释一下这个过滤器的工作原理好吗？我是一名初学者，如果您这样做，我会很高兴。文档对此进行了很好的解释：

<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