HTML Class Name from Angular Array Element

Question

I have an Angular array that contains JSON data. One of the elements is the name of an ionic icon. I am using ng-repeat to loop through the elements and I want to dynamically update the ionic icon name on each iteration.

<div class = "row" ng-repeat="item in serviceList" ng-switch   on="$index % 3">
  <div class = "col text-center" ng-switch-when="0">
      <i class = "services icon ion-laptop">{{ serviceList[$index].IconName }} </i>
  </div>

  <div class = "col text-center" ng-switch-when="0"> 
    <i class = "services icon ion-laptop">{{ serviceList[$index+1].IconName }}</i>
  </div>

In this example I have manually set ion-laptop, but I want to use serviceList[$index].IconName and serviceList[$index+1].IconName }} respectively to update the icon. The above code will output the icon name string, but I cannot figure out how to place that inside of the HTML class tag. Any thoughts?

Atul Sharma · Accepted Answer · 2016-12-11 15:31:36Z

0

<div class = "row" ng-repeat="item in serviceList" ng-switch   on="$index % 3">
  <div class = "col text-center" ng-switch-when="0">
      <i class = "services icon {{ serviceList[$index].IconName }}"> </i>
  </div>

  <div class = "col text-center" ng-switch-when="0"> 
    <i class = "services icon {{ serviceList[$index+1].IconName }}"></i>
  </div>

No big issue.. GO Ahead

answered Dec 11, 2016 at 15:31

Atul Sharma

11k10 gold badges42 silver badges69 bronze badges

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

1 Comment

Hadi Over a year ago

ng-class instead of class

Collectives™ on Stack Overflow

HTML Class Name from Angular Array Element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related