在angularjs中使用ng-repeat列出树结构时出错

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>

Answer 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

Answer 2

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}}