Angularjs - nest arrays

Question

I am trying to design the data model for

-> Section
   -> Sub Section
      ->Main Element
      ->Main Element
   -> Sub Section
      ->Main Element
      ->Main Element
      ->Main Element
...

This is what I have right now:

[{
  'section': 'market map',
  'subsections': ['aa','bb'],
  'mainelements': 
      [
        ['cc','dd'],
        ['ee','ff'],
      ]
}];

This is what I want:

-> Market Map
   -> aa
      ->cc
      ->dd
   -> bb
      ->ee
      ->ff

This is my html:

<ul>
        <li ng-repeat="data in datas">
                <ul>
                <li ng-repeat="subsection in data.subsections">
                       <input type="text" ng-model="subsection"  size="30" placeholder="add subsection here">
                       <ul>
                        <li ng-repeat="mainelement in audit.mainelements">
                            <input type="text" ng-model="mainelement"  size="30" placeholder="add mainelement here">
                        </li>
                       </ul>
                </li>
                </ul>
         </li>
</ul>

and i get this:

-> Market Map
   -> aa
      ->[cc, dd]
   -> bb
      ->[ee, ff]

How can I get the result I wanted?
Is there a better way to design the json structure for this kind of hierarchy?

Anik Islam Abhi · Accepted Answer · 2015-10-15 02:08:34Z

Make your json design like this

$scope.datas=[{
  'section': 'market map',
  'subsections': [{
      subSection: 'aa',
      mainelements: ['cc','dd']
   },{
     subSection: 'bb',
     mainelements: ['ee','ff']
   }]
}];

Then your html will be

<ul>
        <li ng-repeat="data in datas=">
            {{data.section}}
                <ul>
                <li ng-repeat="subsection in data.subsections">
                       <input type="text" ng-model="subsection.subsection"  size="30" placeholder="add subsection here">
                       <ul>
                        <li ng-repeat="mainelement in subsection.mainelements">
                            <input type="text" ng-model="mainelement"  size="30" placeholder="add mainelement here">
                        </li>
                       </ul>
                </li>
                </ul>
         </li>
</ul>

Collectives™ on Stack Overflow

Angularjs - nest arrays

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related