如何使用 AngularJS 为 ion-list 元素实现动态样式？

Question

我有一个带有消息列表的 Ionic 框架应用程序。消息有 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 着色？

更新

在第一个答案的帮助下修改代码后，颜色边框会出现，但它们不会随项目移动，这应该是因为它们应用了 ion-option-button。

这是新的 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 Example

---

对于直接针对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 link - <ion-item> 元素的工作示例

Image Sample - 将 <a> 标记定位为“移动”条目

---

经过进一步调查，在某些仿真环境中，<a> 标记不会呈现为<ion-item> 的子元素。但是，直接子元素将有一个 .item-content 类，例如<div class="item-content">。在这种情况下，让我们更改 CSS 以针对此类而不是特定子元素。

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