AngularJS Bedingte Formatierung Ng-repeat

Question

Ich habe auf einem Demo-Shopping-App arbeitet AngularJS mit dem ich in der Lage sein wollen, zur Liste Produkte auf den Korb und dann die Liste sortieren, basierend auf einigen Nahrungs Attribute. Ich habe die Sortierfunktion, die für jedes der Attribute funktioniert, benutze ng-repeat, um das Array von Elementen zu durchlaufen, und ng-click, um die Reihenfolge der Elemente zu sortieren.

Als nächsten Schritt, den ich auf einem Produkt einige zusätzliche Informationen angezeigt werden soll, wenn die Liste sortiert ist. Jedes Mal, wenn Sie die Liste sortieren, möchte ich, dass alle Produkte, die X in dem sortierten Attribut überschreiten, hervorgehoben werden, z. vielleicht ein roter Hintergrund, und zeigt die tatsächliche Zahl an. Alles unter X sollte normal angezeigt werden. Wenn die Liste in ihrer Standardansicht ist, möchte ich nicht, dass irgendeine dieser Formatierungen angezeigt wird.

ist die Art ausgelöst, um den folgenden Drop-Down mit:

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    {{sortedBy}} 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li><a href="#" event-focus="click" data-value="unsorted" value="unsorted" event-focus-id="ProductID" ng-click="reload()">Default</a></li> 
    <li><a href="#" event-focus="click" data-value="Energy" value="Energy" event-focus-id="ProductID" ng-click="order('HealthStats.Energy')">Energy</a></li> 
    <li><a href="#" event-focus="click" data-value="fat" event-focus-id="ProductID" ng-click="order('HealthStats.Fat')">Fat</a></li> 
    <li><a href="#" event-focus="click" data-value="saturates" event-focus-id="ProductID" ng-click="order('HealthStats.Saturates')">Saturates</a></li> 
    <li><a href="#" event-focus="click" data-value="sugar" event-focus-id="ProductID" ng-click="order('HealthStats.Sugar')">Sugar</a></li> 
    <li><a href="#" event-focus="click" event-focus-id="ProductID" ng-click="order('HealthStats.Salt')" data-value="salt">Salt</a></li> 
    </ul> 

Die Art verwendet die folgenden Controller:

app.controller('sortAttribute', function($scope, $http, localStorageService) { 
$scope.basketID = localStorageService.get('basketID'); 
console.log($scope.basketID); 

$http.get("../api/BasketService?basketId=" + $scope.basketID) 
     .then(function(response){ 
      $scope.products = response.data.BasketContentItemList; 
     }) 

$scope.predicate = ProductID; 
$scope.sortedBy = 'Sort Basket By:' 
$scope.reverse = false; 
$scope.order = function(predicate) { 
$scope.reverse = true; 
$scope.predicate = predicate; 
$scope.sortedBy = predicate.substr(12, predicate.length); 
}; 

** I entfernt Teile des Controllers habe, die nicht relevant sind

Diese ng-repeat druckt dann den Produktnamen, Menge, Preis und Bild:

<div class = "product-list-info-container" ng-repeat="product in products | orderBy:predicate:reverse"  > 

     <div class = "product-image"> 
      <span class="label label-primary"></span><img ng-src="{{ product.ImageUrl }}" /> 
     </div> 
     <div class="product-name"> 
      <span ng-style="set_color(attribute)" class="label label-primary" ><!--Description :--></span><p> {{ product.ProductName }} x {{ product.Quantity }}</p> 
     </div> 
     <div class="product-price"> 
      <span class="label label-primary"><!--Description :--></span><p> £{{ product.ProductPrice}}</p> 
     </div> 
    </div> 

Die Produkte werden in diesem Format zurückgegeben:

{ 
"BasketContents": { 
    "BasketContentItemList": { 
     "ProductInformation": [ 
      { 
       "ProductID": "3257340", 
       "HealthStats": { 
        "Energy": "30", 
        "Fat": "0.1", 
        "Salt": "0.1", 
        "Saturates": "0.1", 
        "Sugar": "6" 
       }, 
       "ImageUrl": "../images/340_0000003257340_IDShot_90x90.jpg", 
       "ProductName": "Strawberries", 
       "ProductPrice": "2.00", 
       "Quantity": "1", 
       "QuantityOfUnit": "400", 
       "UnitOfMeasurement": "G" 
      }, 
      { 
       "ProductID": "3250075", 
       "HealthStats": { 
        "Energy": "198", 
        "Fat": "19.5", 
        "Salt": "0", 
        "Saturates": "4.1", 
        "Sugar": "0.5" 
       }, 
       "ImageUrl": "../images/075_0000003250075_IDShot_90x90.jpg", 
       "ProductName": "AVOCADOS", 
       "ProductPrice": "1.75", 
       "Quantity": "1", 
       "QuantityOfUnit": "1", 
       "UnitOfMeasurement": "SNGL" 
      } 

Ich habe verschiedene Möglichkeiten erforscht das Styling auf einen Wert innerhalb des Arrays, aber bisher das einzige das, was ich gefunden habe Basis zu ändern, die verwendet werden können, in Verbindung mit ng-repeat ist $ first - dies ist jedoch nicht geeignet, da dies bedeutet, dass das Styling immer auf das erste Produkt in der Liste angewendet wird, auch wenn es den erforderlichen Wert nicht überschreitet.

TLDR; weiß jemand, wie ich bedingte Formatierung auf Elemente innerhalb einer ng-Wiederholung basierend auf einem Wert innerhalb des Arrays anwenden kann?

Answer 1

einen Blick auf die Richtlinie ngClass haben, wird es ermöglichen es Ihnen, auf einem Modell bedingt Klassen gelten basiert.

wird dieses Beispiel wird die Klasse highlight gilt, wenn der Produktpreis von mehr als 200 ist (ich auch empfehlen, nicht alle Ihre Werte im Modell als String würde zu speichern, wenn andere Datentypen geben, die besser passen)

<div ng-class="{highlight: product.ProductPrice > 200}" class = "product-list-info-container" ng-repeat="product in products | orderBy:predicate:reverse"  > 
    <div class = "product-image"> 
    <span class="label label-primary"></span><img ng-src="{{ product.ImageUrl }}" /> 
    </div> 
    <div class="product-name"> 
    <span ng-style="set_color(attribute)" class="label label-primary" ><!--Description :--></span><p> {{ product.ProductName }} x {{ product.Quantity }}</p> 
    </div> 
    <div class="product-price"> 
    <span class="label label-primary"><!--Description :--></span><p> £{{ product.ProductPrice}}</p> 
    </div> 
</div>