AngularJS - ng-repeat для отображения пустых ячеек, когда данные недоступны

У меня есть простой 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>

Спасибо


html angularjs angularjs-directive angularjs-ng-repeat
person Oam Psy    schedule 07.05.2014    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Я создал скрипт, похожий на ваш случай, и исправил его следующим образом:

<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;
}

Скрипка

person AlwaysALearner    schedule 07.05.2014
comment
отличный ответ, может ли ваше решение быть достигнуто с помощью директивы? - person Oam Psy; 07.05.2014
comment
@OamPsy Да, вы можете реализовать это с помощью директивы, но я думаю, что использование функции контроллера более просто. - person AlwaysALearner; 07.05.2014

arrow_upward
1
arrow_downward

Вы можете создать собственный диапазон в своей области:

$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>
person Artem Petrosian    schedule 07.05.2014

arrow_upward
1
arrow_downward

Привет, вот скрипт, который может вам помочь 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>
person Shivaraj    schedule 07.05.2014

arrow_upward
1
arrow_downward

Я не уверен, правильно ли я понял, но у меня были некоторые проблемы при использовании ng-repeat. Если в вашем массиве могут быть повторяющиеся значения, вам следует track by $index.

Попробуйте написать внутри ng-repeat countryDetails in country.Details.slice(0, 12) track by $index вместо countryDetails in country.Details.slice(0, 12)

person serdar    schedule 07.05.2014