ng-wiederholen Sortieren nach Preis unangemessen

Ich benutze eckige ng-repeat mit orderBy für eine Produktkatalogseite, um die Produkte nach ausgewählten Änderung zu bestellen.ng-wiederholen Sortieren nach Preis unangemessen

Hier orderBy Name funktioniert gut, aber wenn es um Preis geht, bestellen Sie so 1,10,11,12,13,14,2,3,4,5,6,7,8,9, weil es nur den ersten Wert überprüft.

Ich brauche das Ergebnis wie dieses 1,2,3,4,5,6,7,8,9,10,11,12,13,14

wählen 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>

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

Produkt ng-Wiederholungscode

$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: '#'}, 
];

Quelle

2016-07-30 Gaurav Aggarwal

Dies ist, weil der Preis Schlüssel ein String ist, keine Nummer. Gibt es eine Chance, dass Sie den Preis als numerischen Wert extrahieren und einen separaten Schlüssel price_sort erstellen können und dann sortieren, ohne ihn dem Benutzer anzuzeigen? – forrestmid

können Sie mir mit etwas Code helfen? –

Können Sie den ng-repeat-Code hinzufügen, den Sie gerade haben? – forrestmid

Da es sich um Währungen/Zahlen handelt, sollten Sie den Datentyp vom Typ Nummer speichern.

Es besteht dann keine Notwendigkeit, den Preis zu analysieren!

Sie können dann problemlos die Daten anzeigen/berechnen/sortieren, wie Sie möchten, ohne Probleme, da es im richtigen Format ist.

Preis Eigenschaften Zahlen ändern:

$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: '#'}, 
... 
];

Und dann:

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

oder mit dem currency filter:

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

Quelle

2016-07-30 22:31:29 cnorthfield

Was passiert, wenn er den Preis als String innerhalb einer Datenbank speichert und kein statisches Array verwendet? Er bat darum, dass wir mit den von ihm bereitgestellten Daten arbeiten und nicht versuchen, das zu ändern, was er gerade hat. Wenn er seine Werte in einen numerischen Typ ändern könnte, dann ist dies definitiv ein besserer Weg. – forrestmid

Er hat nicht gesagt, dass er den Preis als String in einer Datenbank speichert. Er hat ein statisches Array gepostet. Er hat nicht gebeten, mit den Daten zu arbeiten, die er zur Verfügung gestellt hat. Er sagte: "Ich brauche das Ergebnis wie folgt 1,2,3,4,5,6,7,8,9,10,11,12,13,14". Es ist keine schlechte Lösung, den richtigen Datentyp für den Job zu haben. Wenn die Daten als Zeichenfolge in der Datenbank gespeichert werden, ist möglicherweise eine Aktualisierung der Daten in der Datenbank sinnvoll. Imo ist es sinnvoller, den richtigen Datentyp zu verwenden und einen bereits vorhandenen Service zu nutzen. – cnorthfield

Nun, mein Fehler, weil ich nicht wusste, dass die Preise als Zahl und nicht als Strings gespeichert werden sollten, und dies ist der einfachste Weg, dies zu tun. Danke für dieses Wissen, dass ich meinen Code auf diese Weise ändern kann. Dies ist der eigentliche Weg, dies zu tun. –

Sie benötigen einen Preis Nummer zu konvertieren. Sie können parseInt (Preis) anrufen, um dies schnell zu tun.

Quelle

2016-07-30 22:22:14

vielleicht wäre deine Antwort gut, aber bitte erkläre das unvollständig für mich ab sofort. –

Ihre HTML ändern:

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

Und eine Funktion innerhalb des Controllers hinzufügen:

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

Das parsePriceToFloat Funktion nicht numerische Werte entfernen wird und eine Anzahl Art zurück, die Kann dann nach Ihrer Bestellung sortiert werden.

Quelle

2016-07-30 22:26:37 forrestmid

ng-wiederholen Sortieren nach Preis unangemessen

Antwort

Verwandte Themen