повторная сортировка по неуместной цене

0

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

Здесь имя 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>

код продукта ng-repeat

$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: '#'},
];
  • 0
    Это потому, что ключом цены является строка, а не число. Есть ли вероятность того, что вы сможете извлечь цену в виде числового значения и создать отдельный ключ price_sort, а затем отсортировать его, фактически не показывая его пользователю?
  • 0
    Вы можете помочь мне с кодом?
Показать ещё 2 комментария
Теги:
angularjs-orderby

3 ответа

1
Лучший ответ

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

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

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

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

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

Или используя фильтр валюты:

<p class="product_price">{{product.price | currency: '$'}}</p>
  • 0
    Что если он хранит цену в виде строки внутри базы данных и не использует статический массив? Он попросил, чтобы мы работали с предоставленными им данными, а не пытались изменить то, что он имеет в настоящее время. Если бы он мог изменить свои значения на числовой тип, то это определенно лучший путь.
  • 0
    Он не сказал, что хранит цену в виде строки в базе данных. Он опубликовал статический массив. Он не просил работать с предоставленными им данными. Он сказал: «Мне нужен такой результат, как 1,2,3,4,5,6,7,8,9,10,11,12,13,14». Во-первых, наличие правильного типа данных для работы не является плохим решением. Если данные хранятся в виде строки в базе данных, возможно, целесообразно обновить данные в базе данных. По моему мнению, более разумный подход - использовать правильный тип данных и использовать уже существующий сервис.
Показать ещё 1 комментарий
1

Измените свой 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 собирается удалить любые нечисловые значения и вернуть тип номера, который затем может быть отсортирован по вашему заказу.

0

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

  • 0
    Может быть, ваш ответ будет хорошим, но, пожалуйста, объясните мне его неполным.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню