Question

我需要修改此Angular组件：http://khan4019.github.io/tree-grid-directive/test/treeGrid.html（更多信息：https://github.com/khan4019/tree-grid-directive）

我的问题很简单。树网格不允许格式化指定的列，例如通过过滤器。例如，我想将description列中的每个单元格转换为大写。看这里：

http://plnkr.co/edit/6vSAKpZtoEB98fTOqtA4?p=preview

在 treeGridTest.js 中，第36-41行由列定义负责：

$scope.col_defs = [
    { field: "Description"},
    { field: "Area"},
    { field: "Population"},
    { field: "TimeZone", displayName: "Time Zone"}
];

在 tree-grid-directive.js 文件中，第31行（模板代码的一部分）负责在单元格中打印数据：

<td ng-repeat=\"col in colDefinitions\">{{row.branch[col.field]}}</td>\

我想从ng-grid知道解决方案，所以首先，我在$scope.col_defs中为每个对象添加了新元素，我称之为cellDef：

$scope.col_defs = [
    { field: "Description", cellDef: "{{row.branch[col.field] | uppercase}}"},
    { field: "Area", cellDef: "{{row.branch[col.field]}}"},
    { field: "Population", cellDef: "{{row.branch[col.field]}}"},
    { field: "TimeZone", displayName: "Time Zone", cellDef: "{{row.branch[col.field]}}"}
];

我将 tree-grid-directive.js 文件中的第31行替换为：

<td ng-repeat=\"col in colDefinitions\">{{col.cellDef}}</td>\

但是，不是大写描述，而是列中的每个单元格都有文本{{row.branch[col.field]}}，只需看看：

http://plnkr.co/edit/97fcUbUKC5e5svh3r7ML?p=preview

如何解决这个问题？我很感激你的帮助，我是java脚本和angularJS框架的新手。

Answer 1

我刚刚定义了一个css类

.col-uppercase {
    text-transform: uppercase;
}

然后在第31行，改为：

<td ng-repeat="col in colDefinitions" class="{{col.cssClass || ''}}">{{row.branch[col.field]}}</td>

它有效。

啊，别忘了为列定义

定义一个css类属性

{ field: "Description", cssClass:"col-uppercase" }

Answer 2

为了让cellDef能够正常运行，请为该特定字段的cellDef: 'cellDef'添加键值col_defs，然后为您的cellDef分配值JS。

AngularJS - 指令动态模板。变量被视为文本？

2 个答案: