How to add a unique class name for each object in an array with Angular?

Question

I'm iterating over a collection of objects using ng-repeat to create multiple anchor tags and I want to apply a class name equal to the name value of each object plus the word "icon". E.g. for the object { "name" : "square" }, I'd like the tag to have the class="square-icon".

What is the best way to accomplish this?

HTML

<div id="container">
  <a ng-repeat="item in items" ng-class=??(I'm not sure what to put here)?? 
  </a>
</div>

JSON Object example

[{ name: "square" }, 
{ name: "hexagon" }, ... ]

Community · Accepted Answer · 2017-05-23 10:27:24Z

2

The simplest way is to add a class with plain class attribute.

Try <a ... class="{{someObject.name}}-icon">.

For flexibility, you might want to implement custom function which returns a proper ng-class value.

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Apr 12, 2015 at 0:31

Lee Han Kyeol

2,4812 gold badges32 silver badges48 bronze badges

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

1 Comment

gh0st Over a year ago

Great, thank you for both suggestions. For my needs, the simpler solution was sufficient.

Collectives™ on Stack Overflow

How to add a unique class name for each object in an array with Angular?

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