Question

当我设置某个索引时，我正在尝试使用显示特定元素的ng-switch来切换元素。

ng-switch正在运行，除了它只显示最后一个switch语句。

使用此代码时，我只显示“第2帧”div：

<div ng-switch="frame">
  <div ng-switch-when="1">Frame 1</div>
  <span>Some permanent text</span>
  <span ng-switch-when="2">Text relevant to frame 2</span>
  <div ng-switch-when="2">Frame 2</div>
</div>

我希望以上内容在switch-when设置为2时显示所有frame。

注意：标记无法更改。

我该怎么做？
如果我不能有更好/不同的选择？

Answer 1

嵌套你的标记：

<div ng-switch="frame">
    <div ng-switch-when="1">Frame 1</div>
    <span>Some permanent text</span>
    <div ng-switch-when="2">
        <span>Text relevant to frame 2</span>
        <div>Frame 2</div>
    </div>
</div>

编辑：OP编辑了他的问题以指定标记无法更改。

您不能将相同的ng-switch-when应用于多个元素。您可以使用ng-show但是：

<div>
    <div ng-show="frame == 1">Frame 1</div>
    <span>Some permanent text</span>
    <span ng-show="frame == 2">Text relevant to frame 2</span>
    <div ng-show="frame == 2">Frame 2</div>
</div>

DEMO

Answer 2

我认为AndréDion提到的嵌套是一个更清洁的解决方案，但如果你需要这种格式，你可以使用ng-if。这需要Angular 1.1.5 +。

<div>
  <div ng-if="frame==1">Frame 1</div>
  <span>Some permanent text</span>
  <span ng-if="frame==2">Text relevant to frame 2</span>
  <div ng-if="frame==2">Frame 2</div>
</div>

文档：http://docs.angularjs.org/api/ng.directive:ngIf

编辑：ng-show只会隐藏元素，ng-if会完全从DOM中删除它。

是否可以将ng-switch-when属性放在多个元素上？

2 个答案: