CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
shibualexis
shibualexis

Reputation: 4744

How do I use ng-repeat when the dynamic key value is an array

In my controller , i have the data like...

    data = {
        chartTypes":["pie","donut","bar","line"],
        "features":{
            "stacked": ["true","true","true","false"],
            "percentage":["false","false","true","false"]
         }
    };

$scope.docStructure = data

Is there any way that i can user ng-repeat to iterate over the keys and again iterate if the value is an array?

<div ng-app="chartFeatures" ng-controller="chartFeaturesCtrl" style="height:200px; background:red;">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <th>&nbsp;</th>
            <th ng-repeat="chartType in docStructure.chartTypes">{{chartType}}</th>
        </tr>
        <tr ng-repeat="(feature,supportedList) in docStructure.features">
            <td>{{feature}}</td>
            <td ng-repeat="supported in supportedList">{{supported}}</td>
        </tr>

        </table>
    </div>

The ideas is I wanted to do a cross tab as below.

Example:

enter image description here

Upvotes: 1

Views: 2084

Answers (1)

Jerrad
Jerrad

Reputation: 5290

You just need to add track by $index to the ng-repeat on the td tag

<td ng-repeat="supported in supportedList track by $index">{{supported}}</td>

Here's a demo

You could also convert your "features" arrays to contain objects instead of primitives, and then you don't need the track by $index

Here's a demo of that.

Upvotes: 2

Related Questions