javascript - 如何使用 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 移动边界, 将样式规则应用到 child <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; }