Angularjs условные элементы в повторе

Question

Angularjs условные элементы в повторе

0

У меня есть массив объектов в 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. Может ли кто-нибудь предложить какое-либо решение?

Robin Fuller 30 июнь 2016, в 17:44

Источник

0

Я не совсем понимаю это. Я создал Plunker вашего кода. Можете ли вы использовать это, чтобы объяснить, что именно вы хотите, чтобы он делал? plnkr.co/edit/uyQBNabfVMQCXgKVpQmi?p=preview
Rani Radcliff 30 июнь 2016, в 16:05

Теги:

html

angularjs

angularjs-ng-repeat

2 ответа

Ещё вопросы

Я не совсем понимаю это. Я создал Plunker вашего кода. Можете ли вы использовать это, чтобы объяснить, что именно вы хотите, чтобы он делал? plnkr.co/edit/uyQBNabfVMQCXgKVpQmi?p=preview

Rani Radcliff · Answer 1 · 2016-06-30T16-13-00.000Z

Похоже, что то, что вы пытаетесь сделать, невозможно (если я правильно понимаю это). Посмотрите здесь Группы опций

1: https://www.w3.org/TR/html401/interact/forms.html#h-17.6 и здесь: qaru.site/questions/84474/...

Saurabh Sarathe · Answer 2 · 2016-06-30T13-30-00.000Z

Надеюсь, это поможет.

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>

Это вы ищете.