сортировочные продукты на основе цены в угловых JS

[{ 
     "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, Я разрабатываю приложение магазина и я хотел установить ценовой фильтр на странице,сортировочные продукты на основе цены в угловых JS

<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-код, в котором повторяются продукты,

то, что я хочу сделайте это, когда я нажимаю переключатель «от низкого до высокого», я хочу, чтобы продукты были расположены в диапазоне низких и высоких цен, а когда я нажимаю переключатель «от высокого до низкого», я хочу, чтобы продукты были перечислены в высоком к низкому ценовому диапазону. как я могу выполнить эту задачу?

источник

2015-11-25 Sam

Используйте ng-repeat = "продукт в ProductList: orderBy: orderProp: isReverse" и установите true | false для isReverse на переключателе. Для получения дополнительной информации см. Эту тему http://stackoverflow.com/questions/28917819/how-to-set-the-sorting-order-asc-desc-of-an-array-based-on-dynamically-selecte –

будет ли это отменять продукцию по цене? – Sam

Вам нужно указать столбец, по которому вы хотите эту сортировку. Вам нужно заменить «orderProp» на ваш столбец «newprice» –

Поскольку вы хотите, чтобы priceFilter был правдой (для сортировки в обратном порядке), когда проверено значение «от высокого до низкого», а false (для сортировки в порядке возрастания), когда выбрано значение «низкий уровень», вам необходимо присвоить эти значения радио кнопки:

<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. Вероятно, этого не должно быть.

источник

2015-11-25 09:39:04

спасибо JB Nizet, у меня все получилось! пожалуйста, примите удовольствие объяснить мне работу этого фильтра? Я начинаю, и я буду рад, если вы это сделаете. – Sam

Документация объясняет это довольно хорошо: https://docs.angularjs.org/api/ng/filter/orderBy –

сортировочные продукты на основе цены в угловых JS

ответ

Смежные вопросы