Używanie AngularJS do przekształcania wielowymiarowej tablicy w listę wielopoziomową

Question

Używam AngularJS i próbuję użyć polecenia ng-repeat lub podobnego, aby pobrać tablicę wielowymiarową i umieścić ją w DOM jako listę wielu poziomów .

z tego:

var menuOptions = [ 
     ["Page One"], 
     ["Page Two"], 
     ["Page Three"], 
     ["Page Four", ["Sub-Page 1", "Sub-Page 2", "Sub-Page 3"] ], 
     ["Page Five"] 
    ]; 

do tego:

<ul> 
     <li>Page One</li> 
     <li>Page Two</li> 
     <li>Page Three</li> 
     <li>Page Four 
      <ul> 
       <li>Sub-Page 1</li> 
       <li>Sub-Page 2</li> 
       <li>Sub-Page 3</li> 
      </ul> 
     </li> 
     <li>Page Five</li> 
    </ul> 

nie udało mi się znaleźć coś w dokumentacji Angular JS i poszukiwania w internecie przyszedł bezskutecznie. Jestem świadomy, że poradzę sobie z czymś takim za pomocą zwykłego "ol Javascriptu" lub PHP, ale chciałbym użyć jakiegoś Angular JS, takiego jak ng-repeat.

Wszelkie dane wejściowe są mile widziane.

Dzięki!

Answer 1

Jeśli włączyć arraw w tym:

var menuOptions = [ 
    ["Page One", []], 
    ["Page Two", []], 
    ["Page Three", []], 
    ["Page Four", ["Sub-Page 1", "Sub-Page 2", "Sub-Page 3"] ], 
    ["Page Five", []] 
]; 

powinien być w stanie to zrobić:

<ul> 
    <li ng-repeat='option in menuOptions'> 
    {{option[Ø]}} 
    <ul> 
     <li ng-repeat='suboption in option[1]'>{{suboption}}</li> 
    </ul> 
    <li> 
</ul> 

Answer 2

Jeśli nie znasz nazwy swoich klawiszy, można użyć tego Format ...

JSON

{ 
    "aclType": "combined", 
    "active": 1, 
    "attributes": { 
    "a6f8f9fb89ac4b2b12121c4ec4fa5441/#": [ 
     "pub", 
     "sub", 
     "get", 
     "post", 
     "delete" 
    ], 
    "a5f8f9eb89ac4b2b12121c4ec4fa8670/#": [ 
     "pub", 
     "sub", 
     "get", 
     "post", 
     "delete" 
    ] 
    } 
} 

Możesz zapętlić w ten sposób:

<h2>Account Permissions</h2> 
<ul> 
    <li> 
     <p><strong>Active:</strong> {{ acl.active}}</p> 
    </li> 
    <li ng-repeat="(key, data) in acl.attributes"> 
     <p><strong>{{ key }}</strong></p> 
     <ul> 
      <li ng-repeat="permission in data">{{ permission }}</li> 
     </ul> 
    </li> 
</ul>