Angular JSの各ループFor

Question

私はAngularJSを学び始めたばかりで、タイトルとその中の項目でリストを作成する必要があります。その他、各種

カテゴリー1
項1
項2


カテゴリー2
項1
項2
その他、各種

どのようにC私は、カテゴリのタイトルを取得するループを作成し、また、そのカテゴリ内の項目を取得する？私はこのようにそれを表示したいコードで

：

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

Answer 1

は、あなたがこのようなデータ構造を持っていたと仮定し、カテゴリの配列。各カテゴリには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> 

Answer 2

使用NG -繰り返す。次に例を示します。

Javascriptを：

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がその一部であるコントローラの$の範囲で可変です。