2012-10-02 6 views
13

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で処理できることを知っていますが、ng-repeatのようなAngular JSのものを利用したいと思います。

ご了承ください。

ありがとうございます!

答えて

16

あなたがこのにあなたのarrawを有効にした場合:あなたのキーの名前がわからない場合、あなたはこれを使用することができます

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

これは機能します!ありがとうございました:)また、ng-show = "option [1]!= ''"を2番目のレベルのULに追加して、空であればそれを隠すようにしました。 –

+0

@ sys.stderr curious。親ノードのng-repeat = 'option in menuOptions'を宣言しなければ、オプション[1]のサブオプションを適切なスコープにアクセスできますか?意味、適切な範囲に歩かなければなりませんか? – Swordfish0321

2

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

をあなたがこれを行うことができるはずフォーマット...

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> 
関連する問題