Usando AngularJS para convertir una matriz multidimensional en una lista de niveles múltiples

Question

Estoy usando AngularJS y tratando de usar ng-repeat o similar para tomar una matriz multidimensional y ponerla en el DOM como una lista de varios niveles .

de esta:

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

a este:

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

he podido encontrar nada en la documentación angular JS y una búsqueda de la web vinieron en vano. Soy consciente de que puedo manejar algo como esto con simple Javascript o PHP, pero me gustaría utilizar algo de Angular JS como ng-repeat.

Se agradece cualquier entrada.

Gracias!

Answer 1

Si enciende su arraw en esto:

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

Usted debe ser capaz de hacer esto:

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

Answer 2

Si no conoce los nombres de las teclas, puede utilizar esta formato ...

JSON

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

Puede hacer un bucle como este:

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