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> so not bug in angularjs. correct people should aware of change when upgrading 1.2
Comments
Post a Comment