Html AngularJS-ng重复以在数据不可用时显示空单元格

我有一个简单的

ng repeat

，它循环遍历一个JSON文件，其中包含一个国家列表和该国家的详细信息，例如特定月份的货币、人口（本例中为24个）

My

ng repeat

成功循环了前12个月，并在满足

ng开关

标准时显示相应的文本

我面临的问题是，对于一些国家，我们只有不到12个月的数据，在某些情况下，只有3个月

我正在努力做的是，如果没有足够的数据可用，显示一个空单元格

这是我的

ng repeat

：

<tr ng-repeat="country in Countries[key]">
    <th>{{country.countryName}}</th>

    <td ng-repeat="countryDetails in country.Details.slice(0, 12)" ng-switch="countryDetails.Population">
        <span ng-switch-when="10000">Medium</span>
        <span ng-switch-when="20000">Large</span>
        <span ng-switch-when="30000">Larger</span>
        <span ng-switch-when="40000">Very Large</span>
        <span ng-switch-default>Error</span>
    </td>
</tr>

{{country.countryName}
中等的
大的
更大的
很大的
错误

---

谢谢

我创建了一个类似于您案例的小提琴，并按如下方式进行了修复：

<td ng-repeat="countryDetails in country.Details.slice(0, 12)" 
ng-switch="countryDetails">
    <span ng-switch-when="11">Medium</span>
    <span ng-switch-when="22">Large</span>
    <span ng-switch-when="33">Larger</span>
    <span ng-switch-when="44">Very Large</span>
    <span ng-switch-default>Error</span>
</td>
<td ng-repeat="emptyCell in getEmptyCells(country.Details.length)">
    empty
</td>

中等的
大的
更大的
很大的
错误
空的

JS

$scope.getEmptyCells=函数（len）{
var emptyCells=[]；
对于（变量i=0；i<12-len；i++）{
清空细胞。推（i）；
}        
返回空细胞；
}

---

我创建了一个类似于您的案例的小提琴，并按如下方式进行了修复：

<td ng-repeat="countryDetails in country.Details.slice(0, 12)" 
ng-switch="countryDetails">
    <span ng-switch-when="11">Medium</span>
    <span ng-switch-when="22">Large</span>
    <span ng-switch-when="33">Larger</span>
    <span ng-switch-when="44">Very Large</span>
    <span ng-switch-default>Error</span>
</td>
<td ng-repeat="emptyCell in getEmptyCells(country.Details.length)">
    empty
</td>

中等的
大的
更大的
很大的
错误
空的

JS

$scope.getEmptyCells=函数（len）{
var emptyCells=[]；
对于（变量i=0；i<12-len；i++）{
清空细胞。推（i）；
}        
返回空细胞；
}

---

您可以在范围中创建自定义范围：

$scope.range = function(n) {
    return new Array(n);
};

然后在您的

country.Details

数组中循环使用它

<td ng-repeat="a in range(12) track by $index" ng-switch="country.Details[ $index ].Population">
    <span ng-switch-when="10000">Medium</span>
    <span ng-switch-when="20000">Large</span>
    <span ng-switch-when="30000">Larger</span>
    <span ng-switch-when="40000">Very Large</span>
    <span ng-switch-default>Error</span>
</td>

中等的
大的
更大的
很大的
错误

您可以在范围内创建自定义范围：

$scope.range = function(n) {
    return new Array(n);
};

然后在您的

country.Details

数组中循环使用它

<td ng-repeat="a in range(12) track by $index" ng-switch="country.Details[ $index ].Population">
    <span ng-switch-when="10000">Medium</span>
    <span ng-switch-when="20000">Large</span>
    <span ng-switch-when="30000">Larger</span>
    <span ng-switch-when="40000">Very Large</span>
    <span ng-switch-default>Error</span>
</td>

中等的
大的
更大的
很大的
错误

嗨，这是一把小提琴，可能对你有帮助

{{detail}}
{{empty}}

嗨，这是一把小提琴，可能对你有帮助

{{detail}}
{{empty}}

我不确定自己是否理解正确，但在使用ng repeat时遇到了一些问题。如果您的数组可能有重复的值，那么您应该

按$index跟踪

---

尝试在ng repeat

countryDetails in country.Details.slice（0,12）中按$index进行跟踪，而不是在country.Details.slice（0,12）中写入
countryDetails
我不确定是否理解正确，但在使用ng repeat时遇到了一些问题。如果您的数组可能有重复的值，那么您应该
按$index跟踪

尝试在ng内写入重复country.Details中的countryDetails.slice（0,12）按$index跟踪，而不是country.Details中的countryDetails.slice（0,12）
，答案很好，你的解决方案可以通过指令来实现吗？@OamPsy是的，你可以通过指令来实现，但我想使用控制器函数更简单。答案很好，您的解决方案可以通过指令实现吗？@OamPsy是的，您可以使用指令实现，但我想使用控制器函数更简单。