AngularJS bedingte Elemente in ng-repeat

ich eine ein Array von Objekten in JavaScript haben:AngularJS bedingte Elemente in ng-repeat

[ 
    {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"}]} 
]

Mit AngularJS 1.2 (Ich brauche IE8 zu unterstützen) Ich möchte erstellen:

<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>

Also muss ich die Elemente auf der obersten Ebene durchlaufen, die für jede eine Option erzeugen, aber für diejenigen mit Unterelementen, die ich brauche, um eine Optionsgruppe zu erstellen, dann über die Unterelemente schleifen und für jede eine Option erstellen.

In jeder anderen Sprache würde ich eine Schleife mit einer if-Anweisung zu bestimmen, welches Element zu verwenden, aber in angular scheinen Sie ein Element für eine ng-Wiederholung zu erstellen. In HTML können Sie nicht jedes <option> mit einem anderen Element (<div> oder <span>) umhüllen. Also stecke ich fest.

Ich brauche eine elementlose ng-Wiederholung. Kann jemand irgendeine Lösung vorschlagen?

Quelle

2016-06-30 Robin Fuller

Ich bin nicht diese vollständig zu verstehen. Ich habe einen Plunker deines Codes erstellt. Kannst du damit erklären, was du willst? http://plnkr.co/edit/uyQBNabfVMQCXgKVpQmi?p=preview –

Hoffe diese Hilfe.

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>

Ist das, was Sie suchen.

Quelle

2016-06-30 16:23:47

Es sieht so aus, als ob das, was Sie versuchen, nicht möglich ist (Wenn ich das richtig verstehe). Werfen Sie einen Blick hier Option Groups

1: https://www.w3.org/TR/html401/interact/forms.html#h-17.6 und hier: StackOverflow

Quelle

2016-06-30 17:34:23

Antwort

Verwandte Themen