在ng-if中包含另一個ng-repeat的角度ng-repeat

Question

不確定發生了什麼，但看起來像我的表達式沒有得到評估或擴展。

 <div ng-repeat-start="q in questions"> 
      <h3>{{q.text}}</h3> 

       <p ng-if="q.type == 'checkbox'"> 
        <p ng-repeat-start="a in q.answers">1 {{q.type}} 
         <input type={{q.type}}>{{a.text}}</input><br/> 
        </p> 
        <p ng-repeat-end></p> 
       </p> 

       <p ng-if="q.type == 'radio'"> 
        <p ng-repeat-start="a in q.answers">2 {{q.type}} 
         <input type={{q.type}}>{{a.text}}</input><br/> 
        </p> 
        <p ng-repeat-end></p> 
       </p> 
     </div> 
     <p ng-repeat-end></p> 

輸出顯示代碼正在執行每個if，如果他們都是真的。這會產生重複的checkbox /單選按鈕。

1 checkbox Voice calling. 
    1 checkbox Text messaging. 
    1 checkbox Data access 
    2 checkbox Voice calling. 
    2 checkbox Text messaging. 
    2 checkbox Data access 

它應該是這樣的：

1 checkbox Voice calling. 
    1 checkbox Text messaging. 
    1 checkbox Data access 
    2 radio new question 1. 
    2 radio new question 2. 
    2 radio new question 3. 

Answer 1

你的問題是nested p標籤more details

<p>this 
    <p>will not work</p> 
</p> 

P元素表示一個段落。它不能包含塊級元素（包括P本身）。

在這種情況下，ng-if指令將無法正確評估。所以，如果你使用div或span而不是p那麼它應該工作

<div ng-repeat-start="q in questions"> 
     <h3>{{q.text}}</h3> 

      <span ng-if="q.type == 'checkbox'"> 
       <p ng-repeat-start="a in q.answers">1 {{q.type}} 
        <input type={{q.type}}>{{a.text}}<br/> 
       </p> 
       <p ng-repeat-end></p> 
      </span> 

      <span ng-if="q.type == 'radio'"> 
       <p ng-repeat-start="a in q.answers">2 {{q.type}} 
        <input type={{q.type}}>{{a.text}}<br/> 
       </p> 
       <p ng-repeat-end></p> 
      </span> 

    </div> 
    <p ng-repeat-end></p> 

看到Demo