CODEWITHSUNDEEP
angularjsionic-frameworkionic-view
rubenSousa
rubenSousa

Reputation: 291

Change conditionally color of background div in Ionic

I have this list in loop, in a Ionic framework

<ion-list ng-repeat = "item in ritiri.rows |filter: {'entry_by' : currentuserID}" can-frag="false">
    <ion-item class="item-remove-animate item-icon-right" ng-click="ritiriview(item.id_ritiro);">
      <h2>{{item.numero_spedizione}}</h2>
      <p>{{item.rag_soc_mitt}}</p>
      <p>{{item.indirizzo_mitt}}</p>
      <p>{{item.localita_mitt}}</p>

      <i class="icon ion-arrow-right-b"></i>
      <ion-reorder-button class="ion-drag" on-reorder="move(note, $fromIndex, $toIndex)"></ion-reorder-button>
      <ion-option-button class="button-balanced icon-left ion-happy-outline" ng-click="ritirieff(item.id_ritiro)"> Effettua</ion-option-button>
      <ion-option-button class="button-assertive icon-left ion-trash-b" ng-click="mancatiritiri(item.id_ritiro)"> Rifiuta</ion-option-button>
    </ion-item>

  </ion-list>

I need to change te color of div of every listed item if item.id_stato == 13 or 14, or 15. How i can achieve this?

Upvotes: 3

Views: 2178

Answers (2)

Swapnil Kadam
Swapnil Kadam

Reputation: 4293

<ion-item [color]="colorCondition(item) ? 'primary' : 'light'">


//in your ts file
colorCondition(item : ItemSliding){
        let initItem = this.incompleteOrders.indexOf(item);
        let orderStatus = this.incompleteOrders[initItem].status;
        if(orderStatus == 'paid'){
            return false;
        }else if(orderStatus == 'pending'){
            return true;
        }
}

Upvotes: 0

Divyanshu Maithani
Divyanshu Maithani

Reputation: 14976

You can try using conditions on ng-class:

HTML

<div ng-class="{'colored': item.id_stato == 13 || item.id_stato == 14 || item.id_stato == 15}">

CSS

.colored {
    background: color-value;
}

Upvotes: 3

Related Questions