Angular ng-repeat in an ng-if wrapped in another ng-repeat

Question

Not sure exactly what's going on, but it looks like my expressions are not getting evaluated or expanded.

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

The output shows the code is executing every if, as if they were both true. This produces duplicate checkoboxes/radio buttons.

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

It should look like this:

    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.

can you share an example of 'q' object – Vlad Gurovich Apr 20 '14 at 16:07 — Vlad Gurovich, Apr 20 '14 at 16:07

score 2 · Answer 1 · edited May 23 '17 at 11:49

Your problem is nested p tag more details

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

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

In that case ng-if directive will not evaluate properly. So if you use div or span instead of p then it should works

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

see the Demo

+1 Nice job, I should've spotted that one. Deleted my answer. — Fiver, Apr 20 '14 at 18:29
It worked! How about that. I tried `` which did not work. Thanks for the info. — nullsteph, Apr 20 '14 at 18:50

Angular ng-repeat in an ng-if wrapped in another ng-repeat

1 Answers1