[{
"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> 
<label class="control-label">Low to High</label>  
<input type="radio" name="filter" class="form-control" value="reverse" ng-model="priceFilter"> 
<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;单选按钮,我希望产品在高价格范围内上市。我该如何完成这项任务?
答案 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
的意图是什么。它可能不应该存在。