CODEWITHSUNDEEP
angularjs
Abhilash
Abhilash

Reputation: 147

Specifc color to each element of ng-repeat

I have used an ng-repeat to iterate through and array and print out some divs. I have another array which contains different colors (6 of them). Now the max number of the div that can be printed from the loop is 6. I want that some how the divs that are getting printed get a border color from the colors array according to index, i.e. the first div takes the first color, the second one the second color and so on to the number of divs printed. If 4 divs are there then first four colors from the array are used. How do I do this?

<div ng-repeat="x in details">
    <p>{{ x.name }}</p>
    <p>{{ x.fcount }}</p>
    <p>{{ x.email }}</p>
    <p>{{ x.contact }}</p>
    <p>{{ x.DOB }}</p>
</div>

the color array is : color = [#000000, #00ff00, #0000ff, #ff0000, #f7faff, #77da63]

Max number of divs possible are 6 so the array has 6 colors.

Upvotes: 1

Views: 278

Answers (1)

Bill P
Bill P

Reputation: 3618

Use ng-style like this:

<div ng-repeat="x in details" ng-style="{ 'border-color': colors[$index] }">
    <p>{{ x.name }}</p>
    <p>{{ x.fcount }}</p>
    <p>{{ x.email }}</p>
    <p>{{ x.contact }}</p>
    <p>{{ x.DOB }}</p>
</div>

Check the working demo: fiddle

Upvotes: 2

Related Questions