2

所以我有一个列表，其中有一列带有布尔值，以防某些项目有附件，当它确实有附件时，它将显示一个“剪辑”图标。我想对 AngularJS 表做同样的事情：

这是我的代码，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”显示为字符串而不是显示图标图片，我也尝试放置一个材质图标的代码：

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

但它不会工作......所以有什么想法或者我做错了什么吗？

4

3 回答 3

1

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

  <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>
于 2018-01-07T20:42:07.523 回答
0

尝试加载本地图像：

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

然后使用ngSrc指令：

<img ng-src="{{attachImg}}">
于 2018-01-07T20:26:45.003 回答
0

您可以使用 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 类“material-icons”或您的自定义类

于 2018-01-07T20:30:19.163 回答