How can I implement dynamic styling for ion-list elements with AngularJS?

Tags: javascript,html,css,angularjs,ionic-framework

Problem :

I have an Ionic-framework app that has a list of messages. There are 4 types of messages, and depending on the type the message should be displayed on the list with a particular color in the left border.

The question is, how do I indicate the CSS color depending on the type of message?

The HTML looks like this:

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

The CSS looks like this if I fix every message to have the same color (red):

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

How can I change CSS coloring dynamically with AngularJS?


After modifying the code with the help of the first answer the color borders appear but they do not move with the items, that should as they have an ion-option-button applied to them.

This is the new 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'" 
    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-option-button class="button-positive" ng-click="mostrarMenuComp($index)">
    <ion-option-button class="button-assertive" ng-click="mostrarMenuElim($index)">


And this is the new 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 */

So, the issue now is how to make the color borders move with the list items? Here is a capture of the problem:

Solution :

If you have 4 types of messages, you can leverage ngClass to craft something similar to the following, where you'll map a class to the particular message you are interested in. In this case, I have a made up property called type, with values of A B C D and an extra E for demo purposes. Of course, this is a simplistic example - but the foundation here can be easily absorbed into your project specifics

    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

For a more complete example that targets ion-item elements directly, the suggestion above just needs slight CSS modification. Since you expressed you wish to have the border move with the ion-item, apply the style rule to the child <a> tag. Here is a possible solution

.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 - working example with <ion-item> elements

Image Sample - target <a> tags to "move" with entry

Upon further investigation, In certain emulation environments, an <a> tag does not get rendered as a child element of <ion-item>. However, the immediate child element will have a class of .item-content e.g. <div class="item-content">. In this case, let's change our CSS to target this class instead of a specific child element.

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

    CSS Howto..

    What html or css attribute should I modify so that a mobile browser shows the website with no blank space on the right?

    How to create a floating JavaScript Clock for UTC and Local Time?

    Meteor how to serve multiple css for different media types?

    contenteditable does not show pseudoselector :before in safari

    JQuery/CSS - How i can set imagem full size of div

    How to change CSS style of nested list items?

    How to define changing css property based on incrementing class names?

    Show div at mouse click position, accounting for scrolling

    How to create 'greater than' arrow using CSS only?

    How to add drop down menu using CSS?

    How can I set the System.Web.Optimization bundler to correctly transform ISO unicode

    How to make inner UL list not inherit from outer UL List in CSS

    How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

    How to convert a JSON object (created by jquery-css-parser) back to valid CSS code? [closed]

    How to remove IconTabFilter icons using css?

    Navigation Menu That Shows/Hides On Rollover and Click

    How can I add a css property to the first div with a specific class name?

    How to make float : left work same as table-cell?

    how to move fixed slider to top when scrolling using CSS only

    How do I properly reference files in subdirectories (in xampp) for PHP, CSS, etc. on localhost?

    How to add multiple CSS elements to a div using jQuery?

    How to automatically style HTML output of kramdown converter?

    How to apply a CSS class to another element when an object is hovered?

    How can I separate a column on a web page depending on whether or not the browser is mobile?

    How to inherit height in div?

    How do I remove the white space around my html forms?

    How do I adjust the height of the pikaChoose plugin without ruining the width?

    css how to get rounded corners on button.

    How to delay the display of the background image in a div

    How to have an image overlap the edge of a div