Issue
[{
"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"
}
]
this is my product.json file, I am developing a store app and i wanted to set price filter in the page,
<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>
and the code above is my html code for filter's
<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>
this is the html code where the products are repeated,
what i want to do is when i click the "low to high" radio button, i want the products to be arranged in low to high price range, and when i click the "high to low" radio button, i want the products to be listed in high to low price range. how can i accomplish this task ?
Solution
Since you want priceFilter
to be true (to sort in reverse order) when high to low is checked, and false (to sort in ascending order) when low to high is checked, you need to assign these values to the radio buttons:
<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>
Also, the order by in the view should be
orderBy:'newprice':priceFilter
and I'm not sure what your intention is with filter:newprice
. It should probably not be there.
Answered By - JB Nizet
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.