Я использую угловой 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: '#'},
];
Поскольку вы имеете дело с валютой/цифрами, вы должны сохранить тип данных типа номера.
Тогда нет необходимости разбирать цену!
Затем вы можете легко отображать/вычислять/сортировать данные так, как вам хотелось бы, без каких-либо проблем, так как они находятся в правильном формате.
Измените свои ценовые свойства на цифры:
$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 собирается удалить любые нечисловые значения и вернуть тип номера, который затем может быть отсортирован по вашему заказу.
Вам нужно преобразовать свою цену в цифру. Вы можете вызвать parseInt (цена), чтобы сделать это быстро.