htmlcssangularjsangularjs-ng-class

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

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>