问题描述
限时送ChatGPT账号..我正在使用 Angular.js 将 JSON 数据绑定到 ng-table
.
如果任何值为空,则所有列的位置都会受到干扰.如何修复带有列标题的数据?
查看此 Plunker:http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=preview
Description
应该是 null
但所有值都向左移动.
或者,如果任何属性的所有值都为空,则隐藏该特定列.
解决方案为了确定列是否为空,您需要某种列配置,通过迭代数据来查看是否所有行都包含任何列的数据标题(对象键).
然后您可以使用该列配置数组作为 示例配置: HTML 示例配置创建 我确信这可以优化,但这只是开始使用所需功能的一种方式 演示 I'm binding JSON data to If any value is null then positions for all columns gets disturb. How can I fix the data with column header? See this Plunker: http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=preview Or, if all values are null for any property hide that particular column. In order to determine if a column is empty you need some sort of column configuration that gets created by iterating the data to see if all rows contain data for any of the headings (object keys). Then you can use that column configuration array as the repeater for the Example config: HTML Example config create I'm sure this could be optimized but is just a way to get started with functionality wanted DEMO 这篇关于如何固定表格元素 Angular.js 的位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! 更多推荐 [db:关键词] 和 的转发器.
<tr><th ng-repeat="colconfig 中的col" ng-if="col.display">{{col.heading}}</th></tr></thead><tr ng-repeat="数据中的项目"><td ng-repeat="colConfig 中的col" ng-if="col.display">{{item[col.heading]}}</td></tr></tbody>
var keys = Object.keys(data[0]);函数创建配置(){var validKeyCounts = {};var colConfig;键.forEach(功能(键){validKeyCounts[key] = 0;})data.forEach(函数(行,idx){键.forEach(功能(键){if (row.hasOwnProperty(key) && row[key] !== null) {validKeyCounts[key]++;}})});colConfig = keys.map(function (key) {返回 {标题:关键,显示:validKeyCounts[key]>0}});返回 colConfig}
ng-table
using Angular.js.Description
should be null
but all values shifted to left.<th>
and <td>
.[
{
"heading": "Id",
"display": true
},
{
"heading": "Title",
"display": true
},
{
"heading": "Description",
"display": true
},
{
"heading": "Test",
"display": false
}
]
<thead>
<tr>
<th ng-repeat="col in colConfig" ng-if="col.display">{{col.heading}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td ng-repeat="col in colConfig" ng-if="col.display">
{{item[col.heading]}}
</td>
</tr>
</tbody>
var keys = Object.keys(data[0]);
function createConfig() {
var validKeyCounts = {};
var colConfig;
keys.forEach(function (key) {
validKeyCounts[key] = 0;
})
data.forEach(function (row, idx) {
keys.forEach(function (key) {
if (row.hasOwnProperty(key) && row[key] !== null) {
validKeyCounts[key]++;
}
})
});
colConfig = keys.map(function (key) {
return {
heading: key,
display: validKeyCounts[key] > 0
}
});
return colConfig
}
发布评论