How to add an ID(selector) for the HTML tags using ng-class

Issue

I’m using an icon, which I display based on a condition using ng-class. I want to add ID’s for both the HTML tags.

<i ng-show="ctrl.data.length > 1"
   ng-class="{'glyphicon glyphicon-chevron-down': !ctrl.isOpen,
              'glyphicon glyphicon-chevron-up': ctrl.isOpen}">
</i>

Solution

In order to have a dynamic ID value, wrap it in {{}} so that Angular interprets that value.

<i ng-show="ctrl.data.length > 1" id="{{ctrl.isOpen ? 'chevron-up' : 'chevron-down'}}"
   ng-class="{'glyphicon glyphicon-chevron-down': !ctrl.isOpen,
          'glyphicon glyphicon-chevron-up': ctrl.isOpen}">
</i>

Answered By – Protozoid

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.