Join the Stack Overflow Community
Stack Overflow is a community of 6.9 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

We have some nested data which we are are displaying in a table.

One of the table cells is the contents of an array which is turned into a single string using the answer to this question Using comma as list separator with AngularJS

One request we've had is to colour the elements of the array based. The array would be something like:

[{name: "bob", color: red}, {name: "alice", color: green}]

However, I can't seem to find a way of applying the colour to the text as part of the ng-repeat.

I'm aware one option is to pre-process the array and replace the names with elements.

share|improve this question
    
it's hard to really offer a solution based on what you have presented here so far, but have you tried ng-class or ng-style? – Claies 22 mins ago
up vote 3 down vote accepted

The easiest way to apply the color is to use ng-style:

var app = angular.module("app", []);

app.controller("myController", myController)

function myController() {
  this.data = [{ name: "Bob", color: "red" }, { name: "Alice", color: "green"}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="myController as ctrl">
    <ul>
      <li ng-repeat="person in ctrl.data" ng-style="{ color: person.color }">{{person.name}}</li>
    </ul>
  </div>
</div>

share|improve this answer
    
I'd failed to find any example with ng-repeat and ng-style used together. All I'd found was style applied after the fact. – Dan Kelly 6 mins ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.