Question

我试图在模板中的Angular表达式中以编程方式评估过滤器。

HTML：

<div ng-app="myApp">
    <div ng-controller = "MyCtrl">
        <div ng-grid="gridOptions" class="gridStyle"></div>
    </div>
</div>

JS：

var app = angular.module('myApp', ['ngGrid']);

app.controller('MyCtrl', function ($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 43},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];

    $scope.gridOptions = { 
      data: 'myData',
      columnDefs: [{ field: "name", },
                   { field: "age", cellTemplate: '<div><div>{{row.getProperty(col.field) | col.colDef.filter}}</div></div>', cellFilter: 'test' }],
    };
});

app.filter('test', function () {
    return function (input) {
        return input + '!';
    };
});

CSS：

.gridStyle {
    border: 1px solid rgb(212, 212, 212);
    width: 100%;
    height: 500px;
}

正如您所看到的，在＆lt; c; age＆＃39;的cellTemplate中我试图通过我的列定义（col.colDef.filter）中字符串中的过滤器来传递单元格数据。

这可能吗？

我想这样做，因为我只想使用一个模板，但在每个列上定义了各种过滤器。

http://jsfiddle.net/GWha8/2/

Answer 1

如何简单地添加test作为过滤器，而不是获取col：

{{row.getProperty(col.field) | test}}

更新了jsfiddle。

Answer 2

您应该使用的gridOption标识是cellFilter（不是过滤器）。如果您没有进行任何其他需要cellTemplate所需的格式设置，则需要设置$scope.gridOptions.columnDefs[1].cellFilter = 'test'，如下所示：

$scope.gridOptions = { 
  data: 'myData',
  columnDefs: [
    {
      field: "name"
    },
    {
      field: "age",
      cellFilter: 'test'
    }
  ]
};

但是，如果您确实需要进行其他需要cellTemplate的更改，那么您只需在模板中按名称引用过滤器（无需定义$scope.gridOptions.columnDefs[1].cellFilter），如下所示：

$scope.gridOptions = { 
  data: 'myData',
  columnDefs: [
    {
      field: "name"
    },
    {
      field: "age",
      cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()">{{COL_FIELD | test}}</div>''
    }
  ]
};

Answer 3

1）您可以在ngColumn中的ng网格源中修复此问题，并使用列cellFilter

if (colDef.cellTemplate && !TEMPLATE_REGEXP.test(colDef.cellTemplate)) {
        self.cellTemplate = $.ajax({
            type: "GET",
            url: colDef.cellTemplate,
            async: false
        }).responseText;
    }

self.cellTemplate = self.cellTemplate.replace(CUSTOM_FILTERS, self.cellFilter ? "|" + self.cellFilter : "");

2）您可以创建接受过滤器和返回字符串的自定义函数

function getTemplateFilter(test){
return '<div><div>{{row.getProperty(col.field) | '+ test +'}}</div></div>'
}

如何在Angular表达式中以编程方式评估过滤器字符串

3 个答案: