2016-10-16 5 views
0

저는 AngularJS를 배우기 시작했습니다. 그리고 제목과 그 안에있는 항목으로 목록을 만들 수 있어야합니다.각도 JS의 각 루프 For

카테고리 1
항목 1
항목 2
기타

카테고리 2
항목 1
항목 2
기타

어떻게 다 나는 카테고리 제목을 얻기 위해 루프를 만들고 그 카테고리 내에서 아이템을 얻는다. 나는 이런 식으로 표시하고자하는 코드에서

:

<h2>Category 1</h2> 
<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
</ul> 

내가 더 많은 정보를 제공 할 수 없습니다 죄송합니다, 좀 더를 제공 할 언어에 대해 충분히 알지 못한다. 미리 감사드립니다!

는 편집이 : 나는 시도했다 : 나는이 항목에 대한 깊은 또 다른 레이어를 이동하는 방법을 잘 모릅니다이와

$scope.categories = ['category 1', 'category 2'] 

<div ng-repeat="category in categories"> 
    {{category}} 
</div> 

.

또한 나는이 같은 (이 작동하는지 모르겠어요) 할 노력하고있어 :

var categories = {$category: $items} 

angular.forEach(categories, function(category, items)) { 
    //Do Something 
} 
+0

@Soviut 불행히도 여전히 도움이되지 않은 시도한 것들로 편집 됨 – Edward144

답변

2

는이 같은 데이터 구조를 가지고 가정을; 각 범주는 name 특성을 포함하고 items 배열은 해당 범주에 속하는 모든 항목을 포함하는 범주의 배열입니다.

$scope.categories = [ 
    { 
     name: "Category1", 
     items: [ 
      {name: "Item1"}, 
      {name: "Item2"}, 
      {name: "Item3"} 
      // ...more items 
     ] 
    } 
    // ...more categories 
]; 
당신은, 해당 범주의 items 배열을 통해 중첩 루프를 수행 categories 배열을 통해 각 루프 내에서 루프에 의해 ng-repeat 루프를 사용하여 템플릿에이를 나타낼 수

:

<div class="category" ng-repeat="category in categories"> 
    <h2>{{ category.name }}</h2> 
    <ul class="items" ng-repeat="item in category.items"> 
    <li>{{ item.name }}</li> 
    </ul> 
</div> 
+0

감사합니다. – Edward144

0

사용 NG -반복.

자바 스크립트 :

var sections = {[ 
    { 
     header: "Header1", 
     content: ["one", "two", "three"] 
    }, 
    { 
     header: "Header2", 
     content: ["one", "two", "three"] 
    } 
]}; 

HTML :

<div ng-repeat="section in sections"> 
    <h2>{{section.header}}</h2> 
    <ul> 
     <li ng-repeat="item in section.content"> 
      "Item: " {{item}} 
     </li> 
    </ul> 
</div> 

확인 섹션을 확인이 HTML가 속한 컨트롤러의 $ 범위에서 변수입니다 다음은 그 예이다.