2

我试图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当frame设置为 2时，我希望上面显示所有内容。

注意：标记不能更改。

  • 我怎样才能做到这一点？
  • 如果我不能有更好/不同的选择吗？
4

2 回答 2

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

于 2013-11-05T14:42:27.633 回答
0

我认为 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 中完全删除。

于 2013-11-05T14:51:49.053 回答