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个问题：

您的过滤器仍在执行以下操作;

if（＆＃39; SA＆＃39; === 0）{return＆＃39; http://goo.gl/aFomAA＆＃39 ;; }

需要从SA

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

需要将过滤器移到此代码行
之上
$ scope.filter =＆＃39; D＆＃39;;

我不知道为什么但是$ scope.filter似乎会干扰app.filter - 我不会按照这部分代码的做法进行操作，但将过滤器移到此行以上就可以了。

单元格模板中有额外的双引号

cellTemplate：＆＃39;＆＃39;

它应该是：

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

通过这3个更改，过滤器似乎正常工作，但其中一个项目是SA = 4，但尚未在过滤器中使用。

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

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

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

3 个答案: