使用角度 Js 的 ng-grid 中的图像过滤器无法正常工作

Question

我想根据值显示图像，所以我尝试为它应用一些过滤器，但无法弄清楚为什么它不起作用。它只是显示一个没有图像的列。不知道出了什么问题，为什么它没有正确匹配。请帮帮我。在此先感谢。任何帮助将不胜感激。

我的过滤器看起来像

app .filter('imagefilter', function() {
    return function(SA) { 
      if('SA'===0) return 'http://goo.gl/aFomAA';
      if('SA'===1) return 'http://goo.gl/vxCnLC';
      if('SA'===2) return 'http://goo.gl/aFomAA';
        //other mappings
   }
});

单元格模板看起来像

{
      field: "SA",
      sortable:true,
      displayName:"Service Affecting",
     cellTemplate:'<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text><img class="flag" ng-src="{{row.getProperty(\'SA\') | imagefilter}}"</img></span></div>',
    width: '80px'

    }

Answer 1

if("SA"==="0") return 'http://goo.gl/aFomAA';

永远不会是真的，我想你想要

if(SA==="0") return 'http://goo.gl/aFomAA';

Answer 2

好的，我可以使用以下网格，它比原始帖子中的网格稍微简化了一点：

过滤器：

.filter('imagefilter', function() {
        return function(SA) {
            if(SA==='0') { return 'http://goo.gl/aFomAA'; }
            if(SA==='1') { return 'http://goo.gl/vxCnLC'; }
            if(SA==='2') { return 'http://goo.gl/aFomAA'; }
            return 'unknown';
        };

    })

网格：

<div class='gridStyle' ng-grid='gridOptions'></div>

一些样本数据：

$scope.myData = [{name:'John', SA:'0'}, 
                 {name:'Mary', SA: '1'}, 
                 {name:'Fred', SA: '2'}, 
                 {name:'Joan', SA: '0'}];

网格模板：

$scope.gridOptions = { data: 'myData', 
columnDefs:[{field:'name', displayName:'Name'}, 
            {field:'SA', displayName:'ServiceAffecting', 
cellTemplate:'<div><img ng-src="{{row.getProperty(\'SA\') | imagefilter}}"></img></div>'}]};

鉴于模板的复杂性，您的模板中的错误未围绕 row.getProperty 和 {{}} 可能很难发现。

Answer 3

你发的plnkr有3个问题：

1. 您的过滤器仍在执行以下操作；

   if('SA'===0) { return 'http://goo.gl/aFomAA'; }

它需要从 SA 中删除单引号

if(SA===0) { return 'http://goo.gl/aFomAA'; }

1. 过滤器需要移到这行代码上面

   $scope.filter = 'D';

我不知道为什么，但 $scope.filter 似乎会干扰 app.filter - 我没有遵循这部分代码的操作，但是将过滤器移到这一行上方是可行的。

1. 单元格模板中有多余的双引号

   cellTemplate:''

应该是：

cellTemplate:'<div><img ng-src="{{row.getProperty(\'SA\') | imagefilter}}"></img></div>'

通过这 3 项更改，过滤器似乎可以正常工作，只是其中一项是 SA=4，它尚未在过滤器中。

我在这里分叉并更新了你的 plnkr：

http://plnkr.co/edit/oaFjjBMVa632NbEHSjGR?p=preview