如何让角度 ui 网格 footerTemplate 工作？答案

【问题标题】：How to get angular ui grid footerTemplate to work?如何让角度 ui 网格 footerTemplate 工作？
【发布时间】：2015-05-06 15:21:29
【问题描述】：

Angular UI-Grid 有一个名为 footerTemplate 的属性，它应该提供创建自定义页脚模板的可能性。我尝试在字符串中输入 html 内容（带有一些文本的 div），我还尝试在字符串中添加 .html 文件名，甚至是渲染 div 的 ID，但它们似乎都不起作用。我也不清楚我是否需要为此启用 showGridFooter，所以我都尝试了，但 footerTemplate 要么根本不显示，要么如果我将 showGridFooter 设置为 true，它会显示默认页脚（总行数在网格中）。我在这里错过了什么？

【问题讨论】：

标签： javascript angularjs footer angular-ui-grid

【解决方案1】：

我将我的 ui-grid 版本更新为“pre-beta”3.x，现在我和你一样。使用 'showGridFooter' 设置为 true 将自动显示总行数信息。指定“footerTemplate”不会做任何事情。我已经尝试过同时存在和不存在“showGridFooter”和“showFooter”。所以我回答的以下段落仅适用于 2.x“稳定”版本的 ui-grid。

奇怪的是，showFooter 属性需要设置为 true。对我有用的是将一个 html 文件添加到我的项目中，其中包含一个充满好东西的 div（就像你在想的那样）。似乎是一个错误。 showGridFooter 属性对我不起作用。

$scope.gridOptions1 = {
    showFooter: true,
    footerTemplate:'somePath/footerTemplate.html'
}

【讨论】：

【解决方案2】：

http://ui-grid.info/docs/#/tutorial/105_footer

您只需将 html 元素（如 div 或锚标记）拖放到模板中即可。

【讨论】：

【解决方案3】：

对于 angular-ui-grid 3.0.x，它使用以下示例选项：

$scope.options = {
                   showGridFooter: true,
                   gridFooterTemplate: '<div>pink floyd</div>'
};

对于 2.x ng-grid 版本，Mokgra 的版本很好。

【讨论】：

【解决方案4】：

尝试将页脚模板包含在 div 标签内，如

 $scope.gridOptions = {
            showGridFooter: true,
            gridFooterTemplate: "<div>Message Here</div>"
    }

如果你想显示任何范围变量

$scope.SomeScopeVariable = "Message Here";

$scope.gridOptions = {
        showGridFooter: true,
        gridFooterTemplate: "<div>Grid Footer: {{grid.appScope.SomeScopeVariable}}</div>"
}

grid.appScope 允许访问模板中的范围变量。使用 angular-ui-grid 3.0.x 测试

【讨论】：

哇，我一直在寻找 grid.appScope 一段时间。偶然在所有地方偶然发现它。伙计，ui-grid 的文档很糟糕。

【解决方案5】：

如果您想使用下面的代码查看行值的总和可能会有所帮助

{ field: 'age',  footerCellTemplate: '<div class="ui-grid-cell-contents">Total {{col.getAggregationValue()  }}</div>', aggregationType: uiGridConstants.aggregationTypes.sum }

【讨论】：