angularjs 根据ng-repeat值在表列中显示不同的Icon

y3bcpkx1  于 2023-06-21  发布在  Angular
关注(0)|答案(1)|浏览(151)

我是AngularJS的新手,我正在尝试修改旧代码,该代码显示一个表,并允许管理员在允许和禁止所选项目的更新之间切换。如果更新标志已经设置为 true,则单击图标应将其切换为 false(反之亦然)。然而,我想做的是根据更新标志的值显示不同的图标。下面是我目前为止的代码(只显示一个“toggle”动作的图标):

<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>

第二列是dispalying“禁令圈”图标,这就是我想要的图标,如果标志({{s.EnableSeriesUpdates}})是 true(即如果标志为 false(即,如果标志为 false,则我希望将其更改为不同的图标。禁用)以可视地指示想要重新启用更新。
是否有某种方法可以在if/else语句中通过检查**{{s.EnableSeriesUpdates}}**标志的值来实现这一点?我尝试做类似的事情,但它不会识别标志的值(可能是因为我不知道如何在此上下文中获得该值),并且我对如何做到这一点的搜索是空的。我很感激任何帮助。谢谢!

o7jaxewo

o7jaxewo1#

要根据EnableSeriesUpdates标志的值显示不同的图标,您可以使用AngularJS ng-class指令沿着内联if/else语句。
代码如下所示:

<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>

相关问题