Add font-awesome icon to one option in select created by an ng-repeat

712 views Asked by At

Is it possible to add an icon to an option in a dropdown based on if it matches a certain setting from the data returned in an ng-repeat?

I have the following select and the options within that select are created via an ng-repeat that is going off of the data records pulled back from the database.

<select id="playListOpt" class="form-control"
        ng-model="playlistItem.selectedObjectId"
        ng-change="resetModal()" ng-required="true">
    <option role="option" value="0" selected>
      @Resources.L_LMS_ActDetails.CreateNewPlaylist
    </option>
    <option role="option" ng-repeat="playlistItem in playlistDataForActivity"
            value="{{playlistItem.Id}}">                                        
      {{playlistItem.Name}}
    </option>
</select>

As it loops over the playlistDataForActivity is it possible to find the item that has IsDefault = 1 and add an icon next to that option?

This works by changing the color of the option that is set to 'Default' by using the ng-style attribute. What's the best way to add a FontAwesome icon?

<select id="playListOpt" class="form-control"
        ng-model="playlistItem.selectedObjectId" ng-change="resetModal()"
        ng-required="true">
    <option role="option" value="0">
      @Resources.L_LMS_ActDetails.CreateNewPlaylist
    </option>
    <option role="option" ng-repeat="playlistItem in playlistDataForActivity" 
            ng-style="playlistItem.IsDefault && {'color' : 'red'}"
            value="{{playlistItem.Id}}">
      {{playlistItem.Name}}
    </option>
</select>
0

There are 0 answers