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着色？

更新

在第一个答案的帮助下修改代码后，会出现颜色边框，但它们不随项目一起移动，因为它们应用了离子选项按钮。< / p>

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

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

1 个答案: