当 AngularJS 的布尔值为 TRUE 时显示图像（或图标）？

Question

所以我有一个列表，其中有一列包含布尔值，以防某些项目有附件，当它有附件时，它会显示一个 "clip" 图标。我想对 AngularJS table:

做同样的事情

这是我的代码，HTML:
请注意 {{link.Attachments}}

中有一个自定义过滤器 ("booleanFilter")

<body ng-app="myApp">
<div ng-controller="myController">
 <table>
  <thead>
   <tr>
    <th>Attachments</th>
    <th>Name</th>
    <th>Date</th>
   </tr>
  </thead>
  <tbody>
   <tr ng-repeat="link in links">
    <td>{{link.Attachments | booleanFilter}}</td>
    <td>{{link.Name}}</td>
    <td>{{link.Date | date:"MM/dd/yyyy"}}</td>
   </tr>
  </tbody>
 </table>
</div>
</body>

这是我的过滤器脚本：
我想在有附件（为真）时显示 附件图片，为假时不显示任何内容：

var myApp = angular
            .module('myApp', [])
            .filter('booleanFilter', function() {
              return function(booleanFilter) {
                switch(booleanFilter) {
                  case true:
                       return "clip.png";
                  case false:
                       return "";
                }
              }
            })

这段代码的缺点是它将 "clip.png" 显示为字符串而不是显示图标图片，我也尝试放置一个 Material 图标的代码：

<i class="material-icons">attach_file</i>

但这行不通...所以有什么想法或者我做错了什么吗？

Answer 1

尝试加载本地图像：

app.controller('myCtrl', function($scope, $sce) {
  $scope.attachImg = $sce.trustAsResourceUrl('path/clip.png');
});

然后使用ngSrc指令：

<img ng-src="{{attachImg}}">

Answer 2

你可以使用 ng-if

 <tr ng-repeat="link in links">
<td>{{link.Attachments | booleanFilter}}</td>
<i  ng-if="(link.Attachments)>0" class="material-icons">attach_file</i>
<td>{{link.Name}}</td>
<td>{{link.Date | date:"MM/dd/yyyy"}}</td>

因此，如果 "link.Attachment > 0" 或者在您的情况下可以是 == true/false 然后显示图标，应用 css class "material-icons" 或您的自定义 class

Answer 3

如果您的标志是可以具有真值或假值的附件，那么您甚至不需要过滤器：

  <tbody>
   <tr ng-repeat="link in links">
    <td><i ng-if="link.Attachments" class="material-icons">attach_file</i></td>
    <td>{{link.Name}}</td>
    <td>{{link.Date | date:"MM/dd/yyyy"}}</td>
   </tr>
  </tbody>

当 AngularJS 的布尔值为 TRUE 时显示图像（或图标）？

Show an image (or icon) when a boolean value is TRUE with AngularJS?

javascript

image

switch-statement

angularjs

google-material-icons