Для того, чтобы определить, является ли столбец пуст вам нужно какое-то конфигурации столбца, который получает созданный переборе данные, чтобы увидеть, если все строки содержат данные для любого из заголовков (клавиши объекта) ,
Затем вы можете использовать этот массив конфигурации столбцов в качестве повторителя для <th>
и <td>
.
Пример конфигурации:
[
{
"heading": "Id",
"display": true
},
{
"heading": "Title",
"display": true
},
{
"heading": "Description",
"display": true
},
{
"heading": "Test",
"display": false
}
]
HTML
<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
}
Я уверен, что это может быть оптимизирован, но это просто способ, чтобы начать работу с функциональностью требуется
DEMO
как об этом http://plnkr.co/edit/GcO0Laa4bvd9EeAsXMv7?p=preview? –
AFAICS: просто удалите все ваши ng-if-check на == '' || == null. –
@PankajParkar make Id null structure идет не так :(см. Http://plnkr.co/edit/YjGPSy2uyqPC1NJhJvm4?p=preview – Neo