ng-repeat Сортировка по цене неуместно

Я использую угловой ng-repeat с orderBy для каталога товаров, чтобы заказать продукцию в соответствии с выбранным изменением.ng-repeat Сортировка по цене неуместно

Здесь orderBy имя работает нормально, но когда дело доходит до цены, заказывайте так: 1,10,11,12,13,14,2,3,4,5,6,7,8,9, потому что его проверка только первого значения.

Мне нужен результат, как этот 1,2,3,4,5,6,7,8,9,10,11,12,13,14

выберите HTML

<select ng-model="sortFilter" ng-init="sortFilter='name'"> 
    <option value="name">Default</option> 
    <option value="price">Price Low to High</option> 
    <option value="-price">Price High to Low</option> 
</select>

продукты HTML

<div class="col-sm-3" ng-repeat="product in products | orderBy:sortFilter"> 
    <div class="product_box clearfix"> 
     <div class="product_img"> 
      <img src="images/{{product.imgLink}}"> 
     </div> 
     <div class="product_right"> 
      <div class="product_details"> 
       <p class="product_name">{{product.name}}</p> 
       <p class="product_price">{{product.price}}</p> 
      </div> 
      <div class="buy_product"> 
       <p><a href="{{product.link}}"><i class="fa fa-shopping-cart"></i> Buy Now</a></p> 
      </div> 
     </div> 
    </div>

код продукта нг-повтор

$scope.products = [ 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 14.00', link: '#'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 13.00', link: '#'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 12.00', link: '#'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 11.00', link: '#'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 10.00', link: '#'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 9.00', link: '#'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 8.00', link: '#'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 7.00', link: '#'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 6.00', link: '#'}, 
    {imgLink: 'product1.jpg', name: 'eWingtip Congnac Oxford', price: '$ 5.00', link: '#'}, 
    {imgLink: 'product1.jpg', name: 'dWingtip Congnac Oxford', price: '$ 4.00', link: '#'}, 
    {imgLink: 'product1.jpg', name: 'cWingtip Congnac Oxford', price: '$ 3.00', link: '#'}, 
    {imgLink: 'product1.jpg', name: 'bWingtip Congnac Oxford', price: '$ 2.00', link: '#'}, 
    {imgLink: 'product1.jpg', name: 'aWingtip Congnac Oxford', price: '$ 1.00', link: '#'}, 
];

источник

2016-07-30 Gaurav Aggarwal

Это происходит потому, что ключ цена является строкой, не число. Есть ли вероятность, что вы можете извлечь цену как числовое значение и создать отдельный ключ price_sort, а затем отсортировать его, не показывая его пользователю? – forrestmid

Вы можете помочь мне с кодом? –

Можете ли вы добавить код ng-repeat, который у вас есть прямо сейчас? – forrestmid

Поскольку вы имеете дело с валютой/цифрами, вы должны сохранить тип данных номера типа.

Тогда нет необходимости разбирать цену!

Затем вы можете легко отображать/вычислять/сортировать данные так, как вам хотелось бы, без каких-либо проблем, так как они находятся в правильном формате.

Измените свойства цен на номера:

$scope.products = [ 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 14, link: '#'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 13, link: '#'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 12, link: '#'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 11, link: '#'}, 
... 
];

затем:

<p class="product_price">${{product.price}}</p>

Или с помощью currency filter:

<p class="product_price">{{product.price | currency: '$'}}</p>

источник

2016-07-30 22:31:29 cnorthfield

Что делать, если он хранит цену в виде строки внутри базы данных и не использует статический массив? Он попросил, чтобы мы работали с данными, которые он предоставил, а не пытались изменить то, что он в настоящее время имеет. Если бы он мог изменить свои значения на числовые, то это, безусловно, лучший способ пойти. – forrestmid

Он не сказал, что он хранит цену в виде строки в базе данных. Он опубликовал статический массив. Он не просил работать с данными, которые он предоставил. Он сказал: «Мне нужен результат вроде этого 1,2,3,4,5,6,7,8,9,10,11,12,13,14». Наличие правильного типа данных для работы в первую очередь не является плохим решением. Если данные хранятся в виде строки в базе данных, возможно, возможно, обновление данных в базе данных. Имо - это более разумный подход к использованию правильного типа данных и использование уже существующей службы. – cnorthfield

Хорошо, что плохо, потому что я не знал, что цены должны храниться как число не строк, и это самый простой способ сделать это. Спасибо за эти знания, я могу изменить свой код таким образом, это реальный способ сделать это. –

Вы должны преобразовать свою цену числа. Вы можете позвонить parseInt (цена), чтобы сделать это быстро.

источник

2016-07-30 22:22:14

возможно, ваш ответ будет хорошим, но, пожалуйста, объясните его неполную для меня на данный момент. –

Изменить HTML для:

<select ng-model="sortFilter" ng-init="sortFilter='name'"> 
    <option value="name">Default</option> 
    <option value="sort_price">Price Low to High</option> 
    <option value="-sort_price">Price High to Low</option> 
</select> 
<div class="col-sm-3" ng-repeat="product in products | orderBy:sortFilter" ng-init="product.sort_price = parsePriceToFloat(product.price)"> 
    <div class="product_box clearfix"> 
     <div class="product_img"> 
      <img src="images/{{product.imgLink}}"> 
     </div> 
     <div class="product_right"> 
      <div class="product_details"> 
       <p class="product_name">{{product.name}}</p> 
       <p class="product_price">{{product.price}}</p> 
      </div> 
      <div class="buy_product"> 
       <p><a href="{{product.link}}"><i class="fa fa-shopping-cart"></i> Buy Now</a></p> 
      </div> 
     </div> 
    </div> 
</div>

И добавить функцию внутри контроллера:

$scope.parsePriceToFloat = function(price) { 
    return Number(String(price).replace(/[^0-9\.]+/g,"")); 
}

Эта функция parsePriceToFloat собирается удалить любые не числовые значения и возвращает тип номера, который затем можно сортировать по вашему заказу.

источник

2016-07-30 22:26:37 forrestmid

ng-repeat Сортировка по цене неуместно

ответ

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