Ionic ng-if comparing values

Question

Ionic ng-if comparing values

Navigation

#1 by (0 votes)

1

I'm getting data from a API and I want to check if percent_change_1h is less than 0, and if so for displays a different text color.

  <ion-row>
    <ion-col>
      <ion-label ng-if="top.percent_change_1h < 0" style="color: #b21a91;">
        <b>1H: </b>{{top.percent_change_1h}}
      </ion-label>
      <ion-label ng-if="top.percent_change_1h > 0">
        <b>1H: </b>{{top.percent_change_1h}}
      </ion-label>
    </ion-col>
  </ion-row>

How can I make this comparison process, in case it is less than 0 to display a color, and if it is greater than or equal to 0, show another one?

angularjs ionic

asked by anonymous 03.12.2017 / 15:40

1 answer

Conditions in SQL How to edit host file in etc / hosts?

score 0 · Answer 1

You can use ng-class !

Basically, it works as follows: You pass a condition to it, and if this condition is true, it applies that class, if not, apply another. So what you should do is:

Define the conditional expression ("if X is less than 2");

Create the true condition class;

Create false condition class;

Relate this to the ng-class of the element you are going to paint.

Example: (Go to paint the ion-label BACKGROUND, not the letters)

.maiorQueZero {
  background-color: #006600;
}
.menorQueZero {
  background-color: #ff0000;
}

  <ion-row>
    <ion-col>
      <ion-label ng-class="top.percent_change_1h > 0? 'maiorQueZero' : 'menorQueZero' ">
      
      <!-- Se top.percent_change_1h for maior que 0, aplica a classe 'maiorQueZero', se não (:) aplica o menorQueZero-->
      
        <b>1H: </b>{{top.percent_change_1h}}
      </ion-label>
    </ion-col>
  </ion-row>