Question

我有一个简单的ng-repeat循环JSON文件，其中包含国家/地区列表以及有关该国家/地区的详细信息，例如：货币，特定月份的人口（在这种情况下为24）

我的ng-repeat成功循环显示前12个月，并在满足ng-switch条件时显示相应的文字。

我面临的问题是，对于某些国家/地区，我们的数据不到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>

由于

Answer 1

我创建了一个类似于你的案例的小提琴并修复它：

<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 = function(len){
    var emptyCells = [];
    for(var i = 0; i < 12 - len; i++){
        emptyCells.push(i);
    }        
    return emptyCells;
}

Fiddle

Answer 2

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

$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>

Answer 3

您好，这是一个可以帮助您Fiddle

的小提琴

<tr ng-repeat="details in countries.Details">

                <td ng-repeat="detail in details">{{detail}}</td>
            <td ng-if="details.length<12" ng-repeat="empty in getTempArray(details.length) track by $index">{{empty}}</td>      


      </tr>

Answer 4

我不确定我是否理解正确，但在使用ng-repeat时遇到了一些问题。如果您的数组可能包含重复值，则应track by $index。

尝试在ng-repeat countryDetails in country.Details.slice(0, 12) track by $index内写作，而不是countryDetails in country.Details.slice(0, 12)

AngularJS - ng-repeat在数据不可用时显示空单元格

4 个答案:

JS

Fiddle