2016-06-30 2 views
0

NG 반복 조건부 요소 AngularJS와 :는 I가 자바 스크립트 객체의 배열이

난 만들고자 (I는 IE8을 지원하기 위해 필요한) AngularJS와 1.2를 사용
[ 
    {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"}]} 
] 

:

<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가 필요합니다. 누구든지 어떤 해결책을 제안 할 수 있습니까?

+0

. 나는 당신의 코드를 Plunker로 만들었습니다. 당신이 원하는 것을 설명하기 위해 그것을 사용할 수 있습니까? http://plnkr.co/edit/uyQBNabfVMQCXgKVpQmi?p=preview –

답변

0

희망 도움말.

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>

관련 문제