Question

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

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

此外，在前12个月，如果没有可用数据，则单元格中会显示“空”。

但是，当我使用2 ng-repeats和slice时，我似乎无法使我的getEmptyCells函数在大于12的月份内工作/显示为空。

HTML：

<div ng-app="">
<div ng-controller="EventController">
<table>
    <tr ng-repeat="country in Countries">
        <th>{{country.countryName}}</th>

        <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)" class="empty">
            empty
        </td>            

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

        <td ng-repeat="countryDetails in country.Details.slice(13, 24)" 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)" class="empty">
            empty
        </td>            

    </tr>
</table>
</div>
</div>

JS：

function EventController($scope) {
$scope.Countries = [
  {
      countryName:"USA",
      Details:[11,22,33,44,55,66,77,88,99,00,01,02,11,22]
  },
  {
      countryName:"UK",
      Details:[33,44,55,66]
  },
  {
      countryName:"Russia",
      Details:[77,88,99,00]
  }
];
$scope.getEmptyCells = function(len){
    var emptyCells = [];
    for(var i = 0; i < 12 - len; i++){
        emptyCells.push(i);
    }        
    return emptyCells;
}
}

我的小提琴：http://jsfiddle.net/oampz/8hQ3R/

更新了小提琴：http://jsfiddle.net/oampz/8hQ3R/2/尝试使用2个功能

更新了小提琴：http://jsfiddle.net/oampz/8hQ3R/3/在getEmptyCells2中传递切片

Answer 1

这里有2个问题。

首先，你没有将正确的数字传递给slice方法，持续12个月以上的月份。第一个参数是开始索引。在前12个月，您使用了country.Details.slice(0, 12)，这意味着从索引0开始，到索引12结束，定义为

基于零的索引，用于结束提取。切片提取但不包括结束。

因此，您在前12个月使用索引0-11（最多可添加12个元素）。为了显示未来12个月，您需要从索引 12 而不是13开始。

ng-repeat="countryDetails in country.Details.slice(12, 24)"

现在你的第二个问题是你没有为你的第二张表获得正确数量的“空”单元格。原因是你没有考虑到你正在查看下一个 12个月而不是前12个月这一事实。最简单的解决方法是从你使用的长度参数中减去12你正在展示未来12个月。

<td ng-repeat="emptyCell in getEmptyCells(country.Details.length-12)" class="empty">
        empty
</td>

但如果您这样做，请务必更新您的getEmptyCells功能以解决此问题并调整是否收到负数

$scope.getEmptyCells = function(len){
    var emptyCells = [];
    if (len<0) { len = 0; }
    for(var i = 0; i < 12 - len; i++){
        emptyCells.push(i);
    }        
    return emptyCells;
}

这是一个更新的小提琴：http://jsfiddle.net/callado4/8hQ3R/5/

当使用切片两次时数据不可用时，AngularJS-ng-repeat显示空单元格

1 个答案: