Table from 2D array in AngularJS -


i'm stuck on expecting angularjs work out of box without issues, , yet strangely enough...

i'm using json service returns data 2d array:

$scope.data= [     ["val-11", "val-12", "val-13"],     ["val-21", "val-22", "val-23"]     ]; 

from i'm trying generate table this:

<table> <tr ng-repeat="row in data"> <td ng-repeat="col in row">{{col}}</td> </tr> </table> 

i don't understand why angularjs doesn't handle such basic scenario. can correct $index parent loop, if need it, can iterate through values, 1 loop "col in data[0]", cannot result trying use nested loop shown above.

am doing wrong? seems basic not work right away. please me bizarre issue.

in angular 1.0.x ng-repeat directive had numerous bugs caused trying "guess" whether non-object values (i.e. strings or numbers) had been added, removed or moved. problem non-objects have no identity of own, impossible track them accurately. problematic in number of cases , caused ngrepeat code bloated loads of workarounds , edge cases.

in 1.2 improved syntax ng-repeat allow developer specify how identify items in collection. done "track by" keyword. 1 consequence of disallow items have same identifier.

by default ng-repeat try track value of item. if have repeated items such same object or identical strings or numbers ng-repeat complain , see error in console.

var tablectrl = function($scope) {   $scope.data= [     ["", "", "val-13"]   ]; } 

here first 2 items in sub-array same "empty" string. see fiddle: http://jsfiddle.net/teu8r/

if want have repeated items in collection need provide method ng-repeat distinguish them. simplest , obvious approach track items position in collection. done using "track $index". here same example fixed in way:

<table ng-controller="tablectrl">   <tr ng-repeat="row in data">     <td ng-repeat="col in row track $index">        {{$parent.$index}}-{{$index}} {{col}}     </td>   </tr> </table> 

http://jsfiddle.net/h44z8/

so not bug in angularjs. correct people should aware of change when upgrading 1.2


Comments

Popular posts from this blog

c++ - CryptStringToBinary API behavior -

java.util.scanner - How to read and add only numbers to array from a text file -

iphone - Three second countdown in cocos2d -