Question

20518 просмотра

2 ответа

Я использую AngularJS и пытаюсь использовать ng-repeat или тому подобное, чтобы взять многомерный массив и поместить его в DOM в виде многоуровневого списка.

Из этого:

    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>

Я не смог найти что-либо в документации Angular JS, и поиск в Интернете оказался безрезультатным. Я знаю, что могу справиться с чем-то подобным с помощью обычного Javascript или PHP, но я хотел бы использовать некоторые вещи Angular JS, такие как ng-repeat.

Любой вклад приветствуется.

Спасибо!

Автор: Chris Bier Источник Размещён: 13.11.2019 11:50

Answer 1

16 плюса

Решение

Если вы превратите свой массив в следующее

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>

Автор: bigblind Размещён: 02.10.2012 07:34

Answer 2

2 плюса

Если вы не знаете названия ваших ключей, вы можете использовать этот формат ...

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>

Автор: pherris Размещён: 15.09.2013 08:47

Использование AngularJS для превращения многомерного массива в многоуровневый список

Ответы (2)

Вопросы из категории :