使用AngularJS將多維數組轉換爲多級列表

我正在使用AngularJS並嘗試使用ng-repeat或類似方法來獲取多維數組並將其作爲多級列表放入DOM中。使用AngularJS將多維數組轉換爲多級列表

從這個：

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

這樣：

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

我無法找到在角JS文件和搜索網頁的事情不了了之。我知道我可以用普通的Javascript或PHP來處理這樣的事情，但是我想使用一些Angular JS的東西，比如ng-repeat。

任何輸入表示讚賞。

謝謝！

來源

2012-10-02 Chris Bier

如果你把你的arraw這個：

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

你應該能夠做到這一點：

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

來源

2012-10-02 19:34:26 bigblind

This Works！謝謝:)我也在第二級UL中添加了ng-show =「option [1]！=''」，以便當它爲空時隱藏它。 –

@ sys.stderr好奇。如果您沒有在父節點中聲明ng-repeat ='menuOptions'選項，您是否仍然可以在選項[1]中使用子選項來訪問合適的範圍？意思是，你是否必須將它放到合適的範圍內？ – Swordfish0321

如果你不知道你的按鍵的名稱，你可以使用這個格式...

JSON

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

您可以這樣循環：

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

來源

2013-09-15 20:47:14 pherris

使用AngularJS將多維數組轉換爲多級列表

回答

相關問題