余分なdivはng-repeatによって作成されました

Question

私はいくつかのデータを印刷するためにangularJSを使用しようとしています。ここでは、スクリプトの関連セグメントである：あなたがデータで見ることができるように入射型CODE BLUEは一つだけを持っていながら、

$scope.incidentCats = [{ 
    name: "FIRE", 
    incidents: [{ 
    location: "location 1", 
    dateTime: "datetime 1", 
    currStatus: "currStatus 1" 
    }, 
    { 
    location: "location 2", 
    dateTime: "datetime 2", 
    currStatus: "currStatus 2" 
    }] 
}, 
{ 
    name: "CODE BLUE", 
    incidents: [{ 
    location: "location 3", 
    dateTime: "datetime 3", 
    currStatus: "currStatus 3" 
    }] 
}]; 

は、入射型FIREは、2つの事件の記録を持っています。

最後に

<div ng-repeat="category in incidentCats" class="incident"> 
    <header class="category"> 
    <strong>{{ category.name }}</strong> 
    </header> 
    <section> 
    <div ng-repeat="incident in category.incidents"> 
     {{ incident.location }}<br> 
     {{ incident.dateTime }}<br> 
     {{ incident.currStatus }}<br> 
    </div> 
    </section> 
</div> 

、ここでは（私の手の外にあるプロジェクト全体のために使用される任意の一般的なCSSを除く）HTMLのこの特定のセクションのための私のCSSだ：

ここEJSファイル内の関連するコードは次のとおりです。一つのことを除いて、予想通り

.incident { 
    width: 100%; 
    height: 100%; 
    border: 1px solid #fff; 
    position: relative; 
    padding: 5px; 
    margin: 25px 0; 
} 

.incident section { 
    margin-top: 10px; 
} 

.incident section > div { 
    margin: 5px auto; 
} 

はこれまでのところ、コードは動作します：div要素は入射ループで作成されたとき、私は2つのdivがFIREカテゴリと唯一ののために作成することを期待していますCODE BLUEカテゴリのただし、コードは両方のカテゴリに対して2つのdivを作成しました。

これは私が欲しいものではありません。第2の結果divのCODE BLUEには<br>タグが含まれていますが、このカテゴリのレコードには2番目のインシデントが存在しないため、データはありません。この2番目のdivの場所は、最初はdivの空きスペースです最初のインシデントが存在し、正しく印刷されるためです。どのように私はこれを修正することができますか？

Answer 1

はng-repeatがng-repeat-startとng-repeat-endという名前の2つの兄弟のディレクティブを持って、アンギュラバージョン以降1.2からng-repeat-startとng-repeat-end

を使用してみてください。これらを使用して、ng-repeatの開始と終了を明示的に指定できます。したがって、1つのDOM要素でng-repeatディレクティブを使用する代わりに、任意の2つのDOM要素にng-repeat-startとng-repeat-endを指定することができます。

<div class="incident"> 
    <header ng-repeat-start="category in incidentCats" class="category"> 
    <strong>{{ category.name}}</strong> 
    </header> 
    <section ng-repeat-end> 
    <div ng-repeat="incident in category.incidents"> 
     {{ incident.location }}<br> 
     {{ incident.dateTime }}<br> 
     {{ incident.currStatus }}<br> 
    </div> 
    </section> 
</div> 

Answer 2

私は行動を再現しようとしたと私はすべてがうまく働いて見ることができます。 ng-repeatは、必要に応じてHTML構造を生成しています。これは、あなたが投稿したデータに関連している可能性があります。投稿されたデータが正しい場合、HTMLは期待どおりに動作するはずです。問題をデバッグするために、正確なコードを共有してみることができます。私は同じことを再現するために、以下の配列を使用している：これは、使用しているAngularJSのバージョン

$scope.incidentCats = [{ 
    name: "FIRE", 
    incidents: [{ 
    location: "location 1", 
    dateTime: "datetime 1", 
    currStatus: "currStatus 1" 
    }, 
    { 
    location: "location 2", 
    dateTime: "datetime 2", 
    currStatus: "currStatus 2" 
    }] 
}, 
{ 
    name: "CODE BLUE", 
    incidents: [{ 
    location: "location 3", 
    dateTime: "datetime 3", 
    currStatus: "currStatus 3" 
    }] 
}]; 

Plnkr Link