Add a calculated class to an HTML element in angular

Question

I render a bunch of user icons on a page. I want to give them a class based on their ID.

Example user object

{ id: 1234, name: "foo" }

HTML element

<div ng-repeat="user in userList" class="something-{{ user.id % 10 + 1 }}">
</div>

So classes would be like "something-1", "something-2", ... based on the users ID.

The above code doesn't work. No class shows up on the element. What is the right way to do this?

Answer 1

Please give a try with ng-init. In that case your HTML will be

<div ng-repeat="user in userList" ng-init="myId = (user.id % 10) + 1;" class="something-{{ myId }}">
</div>