1

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.

Community
  • 1
  • 1
Dan Kelly
  • 2,634
  • 5
  • 41
  • 61
  • 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 Mar 20 '17 at 14:36

1 Answers1

5

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>
Matthew Jaspers
  • 1,546
  • 1
  • 10
  • 13
  • 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 Mar 20 '17 at 14:52