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>

输出显示代码正在执行，就好像它们都是真的一样。这会产生重复的检查单元/单选按钮。

    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

ng-if中的角度ng-重复包裹在另一个ng-repeat中

1 个答案: