ionic überprüfen Sie einen Wert auf einem JSON-Array und wenden Sie dann eine CSS-Klasse

Question

Ich studiere das ionische Framework, und ich mache eine einfache App, um einige JSON-Daten anzuzeigen, hatte ich keine Probleme mit einem anderen Stil für Textzeichenfolgen in meiner ionischen Liste (story.user), aber jetzt würde ich die Hintergrundfarbe für Wertebereich beispielsweise ändern:

"less than 2""between 2 and 5""greater than 5" für die "story.val"

aber ich habe keine Ahnung, wie möglich zu tun ... jemand mir helfen?

ich nicht viele Dokumentation über Inline-bedingter Ausdruck finden ....

Dies ist der einfache Code erfolgreich mit Streichern, HTML und CSS:

HTML:

<ion-content> 
    <div class="list"> 
     <div class="item" ng-repeat="story in stories"> 
      {{story.val}} - {{story.place}} - {{story.end}} 
      <p ng-class="{ 'user1': 'status-okay', 'user2': 'status-medium', 'user3' : 'status-risk'}[story.user]">{{story.user}}</p> 
     </div> 
    </div> 
</ion-content> 

CSS:

.status-okay { 
    background-color: green; 
} 

.status-medium { 
    background-color: yellow; 
} 

.status-risk { 
    background-color: red; 
} 

Answer 1

Ändern Sie diese

nutzen möchten

<p ng-class="{ 'user1': 'status-okay', 'user2': 'status-medium', 'user3' : 'status-risk'}[story.user]">{{story.user}}</p> 

bis

<p ng-class="{'status-okay': story.val<2, 
       'status-medium': (story.val>=2 && story.val<=5), 
       'status-risk': story.val>5} "> 
{{story.user}} 
</p> 

Here können Sie mehr über ngClass lesen

Answer 2

Sie können Ausdrücke für ionische (Winkel-) schreiben in ng-class zu bewerten:

ng-class="{story.val < 2: 'class-a', story.val > 2 && story.val < 5: 'class-b', story.val > 5: 'class-c'}" 

ersetzen class-a, class-b und class-c mit den Klassennamen, die Sie