Change colour of text within angular array

Question

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.

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
– Claies, Commented Mar 20, 2017 at 14:36

Ben Jaspers · Accepted Answer · 2017-03-20 14:37:04Z

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>

answered Mar 20, 2017 at 14:37

Ben Jaspers

1,5461 gold badge10 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dan Kelly Over a year ago

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.

Collectives™ on Stack Overflow

Change colour of text within angular array

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related