如何使用AngularJS為離子列表元素實現動態樣式？

Question

我有一個Ionic-framework應用，其中包含消息列表。 消息有4種，根據消息的類型，消息應顯示在列表上，並在左側邊框中顯示特定的顏色。

問題是，如何根據消息類型指示CSS顏色？

HTML看起來像這樣：

<ion-content class="ionc">
  <ion-list class="list">
    <ion-item ng-repeat="mensaje in mensajes" class="listitem" ng-click="abrirMensaje($index)" 
    on-hold="mostrarMenu(mensaje, $index)">
      <h2><b>{{ mensaje.hid }}</b></h2>
      <h3>{{ mensaje.alert }}</h3>
      <p class="cont">{{ mensaje.mens }}</p>
      <p class="fecha">{{ mensaje.fecha }}</p>
  </ion-item>
</ion-list>

如果我將每條消息都固定為相同的顏色（紅色），則CSS如下所示：

.buzon-page .item-complex .item-content, .listitem {
  border: 4px;
  border-left-style: solid !important;
  border-left-color: red !important;
}

如何使用AngularJS動態更改CSS顏色？

UPDATE

在第一個答案的幫助下修改了代碼之后，出現了彩色邊框，但它們不會隨項目一起移動，因為它們上已應用了一個離子選擇按鈕 ，所以應該如此。

這是新的HTML：

<ion-content class="ionc">
<ion-list class="list">
    <ion-item ng-repeat="mensaje in mensajes" 
    ng-class="mensaje.tipo == 'Promocion' ? 'clasePromocion': 
              mensaje.tipo == 'Aprobado'  ? 'claseAprobado' : 
              mensaje.tipo == 'Alerta'    ? 'claseAlerta'   : 
              mensaje.tipo == 'ATM'       ? 'claseATM'      : 'default'" 
    ng-click="abrirMensaje($index)" 
    on-hold="mostrarMenu(mensaje, $index)"
    item="item"
    class="item-remove-animate">

    <h2><b>{{ mensaje.hid }}</b></h2>
    <h3>{{ mensaje.alert }}</h3>
    <p class="cont">{{ mensaje.mens }}</p>
    <p class="fecha">{{ mensaje.fecha }}</p>

    <ion-option-button class="button-positive" ng-click="mostrarMenuComp($index)">
      Compartir
    </ion-option-button>
    <ion-option-button class="button-assertive" ng-click="mostrarMenuElim($index)">
      Eliminar
    </ion-option-button>

  </ion-item>
</ion-list>

這是新的CSS：

.clasePromocion {
  border-left: solid 6px #0078ff !important; /* azul */
}

.claseAprobado {
  border-left: solid 6px #faaf40 !important; /* amarillo */
}

.claseAlerta {
  border-left: solid 6px #ee4036 !important; /* rojo */
}

.claseATM {
  border-left: solid 6px #00a551 !important; /* verde */  
}

.default {
  border-left: solid 6px white !important; /* blanco por defecto */
}

那么，現在的問題是如何使顏色邊框隨列表項一起移動？ 這是該問題的捕獲： http : //i57.tinypic.com/2r71o5c.jpg

Answer 1

如果您有4種消息類型，則可以利用ngClass來編寫類似於以下內容的代碼，其中將類映射到您感興趣的特定消息。在這種情況下，我有一個名為type組合屬性，其中演示目的A B C D和一個額外的E值。 當然，這是一個簡單的示例-但是這里的基礎可以很容易地吸收到您的項目細節中

<span  
    ng-repeat="msg in messages" 
    ng-class="msg.type == 'A' ? 'classA' : 
              msg.type == 'B' ? 'classB' : 
              msg.type == 'C' ? 'classC' : 
              msg.type == 'D' ? 'classD' : 'default'">{{ msg.text }}</span>

---

$scope.messages = [
    { 'type': 'A', 'text': 'message' },
    { 'type': 'B', 'text': 'message' },
    { 'type': 'C', 'text': 'message' },
    { 'type': 'D', 'text': 'message' },
    { 'type': 'E', 'text': 'message' } // -- will be .default
];

---

.classA { border-color: dodgerblue; }

.classB { border-color: tomato; }

.classC { border-color: limegreen; }

.classD { border-color: orange; }

.default { border-color: purple; }

JSFiddle示例

---

對於直接針對ion-item元素的更完整示例，上面的建議僅需對CSS進行少量修改。 由於您表示希望使邊框與ion-item一起移動，因此將樣式規則應用於子<a>標記。 這是一個可能的解決方案

.classA a { border-left: solid 4px dodgerblue !important; }

.classB a { border-left: solid 4px tomato !important; }

.classC a { border-left: solid 4px limegreen !important; }

.classD a { border-left: solid 4px orange !important; }

.default a { border-left: solid 4px purple !important; }

CodePen鏈接 -具有<ion-item>元素的工作示例

圖像樣本 -目標<a>標簽可通過條目“移動”

---

經過進一步研究，在某些仿真環境中， <a>標記不會呈現為<ion-item>的子元素。 但是，直接子元素將具有.item-content類，例如<div class="item-content"> 。 在這種情況下，讓我們將CSS更改為針對此類而不是特定的子元素。

.classA .item-content { border-left: solid 4px dodgerblue !important; }