Нг-повторная сортировка по цене неуместна

Я использую угловой 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: '#'},
];
Источник

3 ответа

Решение

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

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

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

Измените ваши цены на номера:

$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>
Источник

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

Источник

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

Источник
Другие вопросы по тегам