英文:
Display different Icon in table column based in ng-repeat value
问题
我是新手使用AngularJS，正在尝试修改旧代码，该代码显示一个表格，并允许管理员在所选项目之间切换允许和禁止更新。基于更新标志是否已设置为true，然后点击图标应将其切换为false（反之亦然）。然而，我想根据更新标志的值显示不同的图标。以下是我目前的代码（仅显示“切换”操作的一个图标）：
<tr ng-repeat="s in series">
@if (isAdmin)
{
<td ng-click="actions.remove($index)">
<span class="glyphicon glyphicon-remove text-danger" title='删除此系列'></span>
</td>
<td ng-click="actions.toggle($index)" class="editable-click" style="text-align: center">
<span class="glyphicon glyphicon-ban-circle text-warning" title='启用/禁用此系列的更新'></span>
</td>
}
<td>{{s.ReleaseYear}}</td>
<td>{{s.TitleId}}</td>
<td>{{s.TitleName}}</td>
</tr>
第二列显示“禁止圆圈”图标，如果标志({{s.EnableSeriesUpdates}})为true（即已启用），那就是我想要的图标。如果标志为false（即已禁用），我想将其更改为不同的图标以视觉上表示希望重新启用更新。
是否可以通过if/else语句的方式来实现，通过检查**{{s.EnableSeriesUpdates}}**标志的值吗？我尝试过类似的操作，但它无法识别标志的值（可能是因为我不知道如何在这个上下文中获取该值），我的搜索也没有结果。我会感激任何帮助。谢谢！
英文:
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!
答案1
得分: 0
根据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>
请注意，此处提供的是HTML代码，不包括实际的AngularJS和C#代码。
英文:
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论