javascript - AngularJS - ng-repeat to display empty cell/s when data is not available when using slice twice -

i have simple ng-repeat loops through json file list of countries , details country e.g. currency, population particular set of months (24 in case)

my ng-repeat loops through first 12 months successfully, , displaying corresponding text when ng-switch criteria met.

additionally, first 12 months, if there no data available, 'empty' displayed in cell.

however, using 2 ng-repeats , slice, cant seem getemptycells function work/display empty months greater 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 = 0; < 12 - len; i++){         emptycells.push(i);     }             return emptycells; } } 

my fiddle: http://jsfiddle.net/oampz/8hq3r/

updated fiddle: http://jsfiddle.net/oampz/8hq3r/2/ attempting use 2 functions

updated fiddle: http://jsfiddle.net/oampz/8hq3r/3/ passing slice in getemptycells2

you have 2 issues here.

first, not passing right numbers slice method months greater th 12. first parameter begin index. first twelve months used country.details.slice(0, 12) means start @ index 0 , end @ index 12 defined

zero-based index @ end extraction. slice extracts not including end.

so using index 0-11 first 12 months (which adds 12 elements). in order display next twelve months, need start @ index 12 not 13.

ng-repeat="countrydetails in country.details.slice(12, 24)" 

now second issue aren't getting right number of "empty" cells second table. reason because have not accounted fact looking @ next 12 months, not first 12. easiest way fix subtract 12 length parameter use when displaying next 12 months.

<td ng-repeat="emptycell in getemptycells(country.details.length-12)" class="empty">         empty </td>  

but if this, make sure update getemptycells function account , adjust if negative number

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

here updated fiddle: http://jsfiddle.net/callado4/8hq3r/5/