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" }, ... ]

Answer 1

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.