Использование AngularJS для превращения многомерного массива в многоуровневый список
20518 просмотра
2 ответа
9537 Репутация автора
Я использую 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 Источник Размещён: 02.10.2012 07:17Ответы (2)
16 плюса
7519 Репутация автора
Если вы превратите свой массив в следующее
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
2 плюса
10011 Репутация автора
Если вы не знаете названия ваших ключей, вы можете использовать этот формат ...
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
Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- javascript Скрипт входа со скрытыми кнопками
- javascript Как автоматически изменить размер текстовой области с помощью Prototype?
- javascript Удаление элементов с помощью Array.map в JavaScript
- javascript Прокрутка переполненных DIV с помощью JavaScript
- javascript API Карт Google - проблемы с классом GLatLngBounds
- javascript Проверка десятичных чисел в JavaScript - IsNumeric ()
- angularjs AngularJS с Django - конфликтующие шаблоны тегов
- angularjs Can one AngularJS controller call another?
- angularjs Вставьте HTML в представление
- angularjs Как работает привязка данных в AngularJS?
- angularjs Могу ли я использовать другой префикс вместо `ng` с angularjs?
- angularjs Не удается добраться до $ rootScope
- angularjs Отслеживание просмотров страниц Google Analytics с помощью AngularJS
- angularjs Как сделать пейджинг в AngularJS?
- angularjs Where to put model data and behaviour? [tl; dr; Use Services]
- angularjs Скрытые поля в AngularJs