由ng-repeat創建的額外div

我正在嘗試使用angularJS打印出一些數據。下面是腳本的相關段：由ng-repeat創建的額外div

$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有兩個事件的記錄，而事件類型CODE BLUE只有一個。

這裏是在EJS文件中的相關代碼：

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

最後，這是我的HTML的這個特定部位（不包括用於整個項目，是從我手中的公用CSS）CSS：

.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類別中創建，只有一個div爲CODE BLUE類別。但是，代碼爲這兩個類別創建了兩個div。

這不是我想要的。由於第二個div在CODE BLUE中包含<br>標籤但沒有數據，因爲此類別的記錄中沒有第二次事件，所以現在有一段空白空間，其中第二個div位於第一個div之下，這很好因爲第一個事件確實存在並被正確打印出來。我該如何糾正這一點？

來源

2016-08-22 thegreatjedi

您正在使用的AngularJS的版本？ –

我剛剛用你的代碼創建了一個[plunkr]（https://plnkr.co/edit/rtjnZp1UVuyHUtddqiDi?p=preview），它似乎工作正常。 – th1rdey3

嘗試使用ng-repeat-start和ng-repeat-end

從角1.2版本起，ng-repeat了名爲ng-repeat-start和ng-repeat-end兩個兄妹指令。有了這些，我們可以明確指定ng-repeat的開始和結束。因此，我們可以在任何兩個DOM元素上指定ng-repeat-start和ng-repeat-end，而不是在單個DOM元素上使用ng-repeat指令。

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

來源

2016-08-22 03:28:48

我試圖複製的行爲，我所看到的一切運作良好。 ng-repeat正在生成HTML結構。這可能與您發佈的數據有關。如果發佈的數據是正確的，那麼HTML應該按預期工作。您可以嘗試共享您的確切代碼以調試問題。我用下面的數組再現相同的：

$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

來源

2016-08-22 03:39:19 Jayesh

由ng-repeat創建的額外div

回答

相關問題