如何根據ng-repeat中的條件添加容器div？

如何在ng-repeat中添加基於特定條件的div容器？基本上我想把主容器分成多個部分。這裏是代碼示例片段：如何根據ng-repeat中的條件添加容器div？

<div class="content-wrapper"> 
     <div class="content" 
      ng-repeat="metadata in $ctrl.pages" 
      ng-class="metadata.page.title"> 
     <div class='page_section_title' ng-repeat="control in metadata.page.controls | orderBy:'sequence'"> 

      //based on type of control - control.type, I want to divide controls into multiple sections - like 
      //if(control.type === 'title'){ 
       <div class='page_title'> 
        <customControl control = 'control'..></customControl> 
       </div> 
      // } else { 
       <div class='page_content'> 
        <customControl control = 'control'..></customControl> 
       </div> 
     // } 
     </div> 
     </div> 

     <footer></footer> 
    </div>

這裏我想通過添加容器div來創建單獨的控件組。有沒有辦法做到這一點？

來源

2016-11-28 Shree

最好的辦法是使用ng-class這樣的伎倆：

<div ng-class="{'page_title': control.type == 'title', 'page_content': control.type == 'content'}"> 
    <customControl control = 'control'..></customControl> 
</div>

的ng-class而非ng-if興趣的是，你只有一個div申報。

在你的全碼：

<div class="content-wrapper"> 
    <div class="content" ng-repeat="metadata in $ctrl.pages"> 

    <div class='page_section_title' ng-repeat="control in metadata.page.controls | orderBy:'sequence'"> 
     <div ng-class="{'page_title': control.type == 'title', 'page_content': control.type == 'content'}"> 
     <customControl control='control' ..></customControl> 
     </div> 
    </div> 

    </div> 

    <footer></footer> 
</div>

Demo on JSFiddle

來源

2016-11-28 09:46:51 Mistalis

<div class="content-wrapper"> 
     <div class="content" 
      ng-repeat="metadata in $ctrl.pages" 
      ng-class="metadata.page.title"> 
     <div class='page_section_title' ng-repeat="control in metadata.page.controls | orderBy:'sequence'"> 

      //based on type of control - control.type, I want to divide controls into multiple sections - like 
      //if(control.type === 'title'){ 
       <div class='page_title' ng-if="control.type == 'title'"> 
        <customControl control = 'control'..></customControl> 
       </div> 
      // } else { 
       <div class='page_content' ng-if="control.type == 'content'"> 
        <customControl control = 'control'..></customControl> 
       </div> 
     // } 
     </div> 
     </div> 

     <footer></footer> 
    </div>

使用ng-if可以實現您的願望。只有當條件爲真時，容器纔會被創建，否則不會。

語法：

<element ng-if="expression"></element>

如果「表達」的值爲真，元件將被添加到DOM，否則它不會。

來源

2016-11-28 09:45:42

謝謝，但我要劃分「page_section_title」容器爲主要有兩種不同的部分/件，對部分包含「稱號「和其他部分應包含多個控件的集合。我想在「if（）{}」語句中使用「else {}」。 – Shree

你已經提到如果和你的問題中的評論。如果這是你的願望，ng-if將按我的建議工作，如ng-if =「control.type =='title'」和ng-if =「control.type =='content'」。如果你需要別的東西，可以請解釋一下。 –

好吧，假設你有一個數組中的對象的集合，每個對象都有屬性，稱爲類型，對象可以有不同的類型（比如，標題，輸入，選擇，分隔符，複選框等）。應該將名爲'title'的類型屬性的對象添加到具有某個類名稱的一個容器中，並且將類型爲「title」的任何（剩餘）對象添加到具有某個類名稱的另一個容器中。 – Shree

如何根據ng-repeat中的條件添加容器div？

回答

相關問題