Error in listing tree structure using ng-repeat in angularjs

Question

I am trying to list a nested dictionary on html using ng-repeat

Here is the full code

But it seems like I can't access the value of dictionary key by

tree.value

as it either doesn't show up or will only print

'tree.value'

Can someone help me out?

<div ng-app>
  <script type="text/ng-template" id="myTemplate">
      <li>X</li>
      <p>1 tree.value</p>
      <ul ng-repeat="tree in tree.children" ng-include="'myTemplate'">
          <p>2 tree.value</p>
      </ul>
  </script>
 <div>
     <ul ng-include="'myTemplate'"
    ng-init="tree = 
               {
        children: 
            [
                {children: [], value: c12}, 
                {
                    children: 
                        [
                            {children: [], value: c112}, 
                            {children: [], value: c111}
                        ],
                    value: c11
                }
            ], 
        value: c1
    }
"></ul>
  </div>
</div>

Pankaj Parkar · Accepted Answer · 2015-04-18 20:02:28Z

1

You json is wrongly defined, you should always wrap string value inside single quotes ' like value: c111 & value: 'c112' values should be like value: 'c111' & value: 'c112'

Markup

    <ul ng-include="'myTemplate'"
        ng-init="tree = 
                   {
            children: 
                [
                    {children: [], value: 'c12'}, 
                    {
                        children: 
                            [
                                {children: [], value: 'c112'},
                                {children: [], value: 'c111'}
                            ],
                        value: c11
                    }
                ], 
            value: c1
        }
"></ul>

More better would be define tree variable inside $scope rather than on html.

Working JSFiddle

answered Apr 18, 2015 at 20:02

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kevin Over a year ago

Do you know why the {{tree.value}} have to be outside of ul tag instead of inside the ul tag?

Pankaj Parkar Over a year ago

@Kevin because when <ul ng-repeat="tree in tree.children" ng-include="'myTemplate'"> tag doesn't have tree.children then that ul will not render by ng-repeat that why it should be out side that ul

Sarkhan · Accepted Answer · 2015-04-18 19:34:06Z

0

it seems c1 is object not string.so c1 has properties.for example c1 has text property.

you should write in template {{tree.value.text}}

answered Apr 18, 2015 at 19:34

Sarkhan

1,3091 gold badge11 silver badges34 bronze badges

Collectives™ on Stack Overflow

Error in listing tree structure using ng-repeat in angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related