如何更改列表的背景顏色？

Question

我有一組數據，因爲我有三種不同的狀態，例如好的，掛起和過期。在此陣列上列出時，我需要爲每種狀態添加不同的顏色。我怎樣才能做到這一點？

這是怎麼了上市陣列：

<ion-list> 
    <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}"> 
    <img src="{{playlist.src}}" id="thumbnile"> 
    {{playlist.name}} 
    </ion-item> 
</ion-list> 

Answer 1

你可以使用納克級，並給予他們不同的CSS類。

<p ng-class="{strike: deleted, bold: important, red: error}">Example</p>

你可以在這裏閱讀更多：https://docs.angularjs.org/api/ng/directive/ngClass

Answer 2

您可以通過納克級的條件運算符實現這一

<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}"> 
    <p ng-class="{ 'okay': 'status-okay', 'pending': 'status-pending', 'expired' : 'status-expired'}[playlist.status]"> 
     <img src="{{playlist.src}}" id="thumbnile">{{playlist.name}} 
    </p> 
</ion-item> 

CSS

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

.status-pending { 
    backgroud-color: yellow; 
} 

.status-expired { 
    backgroud-color: red; 
}