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

您可以通过ng-class条件运算符实现此目的

<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;
}

Answer 2

你可以使用ng-class并给它们不同的css类。

＆＃13;

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

＆＃13;

您可以在此处阅读更多内容：https://docs.angularjs.org/api/ng/directive/ngClass

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

2 个答案: