Question

我正在使用ng-switch并期望在每个条件之后它将是一个break语句。我测试了以下的condtion gradeA，它显示了A-1级和A-2级。我错过了一些配置吗？如果不是如何使ng-switch包含break语句？

<div ng-switch="type">
    <div ng-switch-when="gradeA">
        Grade A-1   
    </div>
    <div ng-switch-when="gradeA">
        Grade A-2
    </div>
</div>

Answer 1

因为ng-switch-when的作用类似于ng-if，这意味着如果条件满足，则该块将被显示为＆＃34;＆＃34; （从技术上讲，它是创建的）。

根据documentation：

ngSwitchWhen：要匹配的案例陈述。如果匹配则会显示此案例。如果多次出现相同的匹配，则将显示所有元素。

在你的例子中，两种情况都是＆＃34; case：gradeA＆＃34;，因此两者都显示出来。

如果您希望有条件地突破＆＃39;，请使用嵌套的ng-if或其他嵌套ng-switch。

Answer 2

Working Plnkr

在div中，您使用了ng-switch-when="gradeA"。因此，将执行具有匹配值ng-switch-when的每个GradeA内的代码。这就是显示Grade A-1和Grade A-2的原因。

您的代码应如下所示：

 <div ng-switch="type">
    <div ng-switch-when="gradeA-1">
        Grade A-1   
    </div>
    <div ng-switch-when="gradeA-2">
        Grade A-2
    </div>
 </div>

请注意，在上面的代码中，第一个ng-switch-when匹配值为gradeA-1，第二个ng-switch-when匹配值为gradeA-2。所以没有机会显示这两个数据。

希望能解决你的问题。

更新： Performance Issue from this answer

我使用的一个解决方案是使用ng-show / ng-hide。这些指令的确如此不修改DOM结构，而是使用CSS来隐藏/显示元素。它可以更快，但要注意DOM可能变得非常如果你陷入试图控制所有的陷阱您的网站的模板/ DOM元素同时在内存中这种方式。

OP of that question also answered with a solution

ng-switch-when没有break语句？

2 个答案: