CODEWITHSUNDEEP
htmlangularjs
linebam59
linebam59

Reputation: 89

Display different Icon in table column based in ng-repeat value

I'm new to AngularJS and I'm trying to modify old code that displays a table and allows the Administrator to toggle between allowing and disallowing updates for the item selected. Based on if the update flag is already set to true, then clicking an icon should toggle it to false (and vice versa). What I want to do, however, is display a different icon based on the value of the update flag. Here is the code I have so far (displaying only one icon for the "toggle" action):

<tr ng-repeat="s in series">
    @if (isAdmin)
    {
        <td ng-click="actions.remove($index)">
            <span class="glyphicon glyphicon-remove text-danger" title='Delete this series'></span>
        </td>
        <td ng-click="actions.toggle($index)" class="editable-click" style="text-align: center">
            <span class="glyphicon glyphicon-ban-circle text-warning" title='Enable/Disable updates for this series'></span>
        </td>
    }
    <td>{{s.ReleaseYear}}</td>
    <td>{{s.TitleId}}</td>
    <td>{{s.TitleName}}</td>
</tr>

The second column is dispalying the "ban circle" icon and that's what I want for the icon if the flag ({{s.EnableSeriesUpdates}}) is true (i.e. enabled). I want to change that to a different icon if the flag is false (i.e. disabled) to visually indicate wanting to re-enable updates.

Is there some way to do this in a if/else statement by checking the value of the {{s.EnableSeriesUpdates}} flag? I tried to do something like that but it wouldn't recognize the value of the flag (probably because I don't know how to get that value in this context) and my searches on how to do it came up empty. I'd appreciate any help. Thanks!

Upvotes: 0

Views: 50

Answers (1)

Derek
Derek

Reputation: 3016

To display a different icon based on the value of the EnableSeriesUpdates flag, you can use the AngularJS ng-class directive along with an inline if/else statement.

The code will look like:

<tr ng-repeat="s in series">
    @if (isAdmin)
    {
        <td ng-click="actions.remove($index)">
            <span class="glyphicon glyphicon-remove text-danger" title='Delete this series'></span>
        </td>
        <td ng-click="actions.toggle($index)" class="editable-click" style="text-align: center">
            <span ng-class="{'glyphicon-ban-circle': s.EnableSeriesUpdates, 'glyphicon-check': !s.EnableSeriesUpdates}" 
                  class="glyphicon" ng-attr-title="{{s.EnableSeriesUpdates ? 'Disable updates for this series' : 'Enable updates for this series'}}"></span>
        </td>
    }
    <td>{{s.ReleaseYear}}</td>
    <td>{{s.TitleId}}</td>
    <td>{{s.TitleName}}</td>
</tr>

Upvotes: 0

Related Questions