У меня есть массив объектов в javascript:
[
{id: 1, name: "Item 1", subItems: []},
{id: 2, name: "Item 2", subItems: []},
{id: 3, name: "Item 3", subItems: [[
{id: 4, name: "Item 3.1"},
{id: 5, name: "Item 3.2"},
{id: 6, name: "Item 3.3"}]}
]
Используя angularJS 1.2 (мне нужно поддерживать IE8), я хотел бы создать:
<select>
<option value="1">Item 1</option>
<option value="1">Item 1</option>
<optgroup label="Item 3">
<option value="4">Item 3.1</option>
<option value="5">Item 3.2</option>
<option value="6">Item 3.3</option>
</optgroup>
</select>
Поэтому мне нужно зациклиться на элементах верхнего уровня, создающих параметр для каждого, но для тех, у кого есть подпункты, мне нужно создать группу опций, а затем перебирать подэлементы, создавая для каждого вариант.
На любом другом языке я бы сделал цикл с инструкцией if, чтобы определить, какой элемент использовать, однако в угловом вам, похоже, нужно создать элемент для ng-repeat. В html вы не можете обернуть каждый <option>
другим элементом (<div>
или <span>
). Поэтому я застрял.
Мне нужен элемент ng-repeat. Может ли кто-нибудь предложить какое-либо решение?
Похоже, что то, что вы пытаетесь сделать, невозможно (если я правильно понимаю это). Посмотрите здесь Группы опций
1: https://www.w3.org/TR/html401/interact/forms.html#h-17.6 и здесь: qaru.site/questions/84474/...
Надеюсь, это поможет.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.item = [
{id: 1, name: "Item 1", subItems: []},
{id: 2, name: "Item 2", subItems: []},
{id: 3, name: "Item 3", subItems: [[
{id: 4, name: "Item 3.1"},
{id: 5, name: "Item 3.2"},
{id: 6, name: "Item 3.3"}]
]}
]
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<ul>
<li ng-repeat="item in item">{{item.name}}
<span ng-if="item.subItems" ng-repeat="subItems in item.subItems">
<ul>
<li ng-repeat="subItems in subItems">{{subItems.name}}</li>
</ul>
</span>
</li>
</ul>
</body>
</html>