javascript 如何让有角度的 ui grid footerTemplate 工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28874761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get angular ui grid footerTemplate to work?
提问by Cox Szg
Angular UI-Grid has a property called footerTemplate, which is supposed to offer the possibility to create a custom footer template. I tried entering html content (a div with some text) in a string, I've also tried adding a .html file name in the string and even the ID of a rendered div, but none of them seem to work. It also wasn't clear for me if I need to enable showGridFooter for this or not, so I tried both, but the footerTemplate is either not shown at all, or if I set showGridFooter to true, it shows the default footer (total lines in the grid). What am I missing here?
Angular UI-Grid 有一个名为 footerTemplate 的属性，它应该提供创建自定义页脚模板的可能性。我尝试在字符串中输入 html 内容（带有一些文本的 div），我也尝试在字符串中添加 .html 文件名，甚至是渲染的 div 的 ID，但它们似乎都不起作用。我也不清楚是否需要为此启用 showGridFooter，所以我都尝试了，但是footerTemplate 要么根本没有显示，要么如果我将 showGridFooter 设置为 true，它会显示默认页脚（总行数）在网格中）。我在这里错过了什么？
回答by radusezciuc
For angular-ui-grid 3.0.x it's working with the following example options:
对于 angular-ui-grid 3.0.x，它使用以下示例选项：
$scope.options = {
showGridFooter: true,
gridFooterTemplate: '<div>pink floyd</div>'
};
For the 2.x ng-grid versions, Mokgra's version is good.
对于 2.x ng-grid 版本，Mokgra 的版本很好。
回答by Abhimanyu Ghei
Try enclosing the footer template inside div tag like
尝试将页脚模板包含在 div 标签中，例如
$scope.gridOptions = {
showGridFooter: true,
gridFooterTemplate: "<div>Message Here</div>"
}
if you want to show any scope variable
如果你想显示任何范围变量
$scope.SomeScopeVariable = "Message Here";
$scope.gridOptions = {
showGridFooter: true,
gridFooterTemplate: "<div>Grid Footer: {{grid.appScope.SomeScopeVariable}}</div>"
}
grid.appScope allows access to scope variables in templates. tested with angular-ui-grid 3.0.x
grid.appScope 允许访问模板中的范围变量。使用 angular-ui-grid 3.0.x 测试
回答by Mokgra
I updated my version of ui-grid to the "pre-beta" 3.x and now I'm at the same point you are. Using 'showGridFooter' set to true will show total rows info automatically. Specifying a 'footerTemplate' doesn't do anything. I've tried with both 'showGridFooter' and 'showFooter' present and absent. So the following paragraph of my answer only works for the 2.x "stable" version of ui-grid.
我将我的 ui-grid 版本更新为“pre-beta”3.x，现在我与您处于同一点。使用 'showGridFooter' 设置为 true 将自动显示总行信息。指定 'footerTemplate' 没有任何作用。我已经尝试过 'showGridFooter' 和 'showFooter' 存在和不存在。因此，我的回答的以下段落仅适用于 ui-grid 的 2.x“稳定”版本。
Wierdly, showFooterproperty needed set to true. What worked for me is to add an html file to my project that contained a div full of goodies (like you were thinking). Seems like a bug. showGridFooter property didn't work for me.
奇怪的是，showFooter属性需要设置为 true。对我有用的是将一个 html 文件添加到我的项目中，该文件包含一个充满好东西的 div（就像你想的那样）。好像是个bug。showGridFooter 属性对我不起作用。
$scope.gridOptions1 = {
showFooter: true,
footerTemplate:'somePath/footerTemplate.html'
}
回答by user4649926
http://ui-grid.info/docs/#/tutorial/105_footer
http://ui-grid.info/docs/#/tutorial/105_footer
You just simply drop html elements like a div or an anchor tag in the template.
您只需在模板中删除 html 元素，例如 div 或锚标记。
回答by Wahap
If you want to see sum of the row values using the code below can be helpfull
如果您想使用下面的代码查看行值的总和可能会有所帮助
{ field: 'age', footerCellTemplate: '<div class="ui-grid-cell-contents">Total {{col.getAggregationValue() }}</div>', aggregationType: uiGridConstants.aggregationTypes.sum }
