anglejs – Angular.js ng切换 – 当不使用动态数据时？

Be aware that the attribute values to match against cannot be expressions. They are
interpreted as literal string values to match against. For example,ng-switch-when=”someVal”
will match against the string “someVal” not against the value of the expression
$scope.someVal.

所以换句话说，ng-switch是用于模板中的硬编码条件。

你会这样使用它：

<div class="assignments">
  <div ng-repeat="assignment in assignments" ng-animate="'animate'">
    <div ng-switch="assignment.id">
      <div ng-switch-when='1' class="my-switch-animation">
      <h2>{{assignment.name}}</h2>
      <p>{{assignment.text}}</p>
    </div>
  </div>
</div>

现在这可能并不适合你的用例，所以有可能你需要重新思考你的策略。

Ng-If可能是您需要的 – 同样，您需要注意“isolated” scopes.基本上，当您使用某些指令(如ng-repeat)时，您将创建与父母隔离的新范围。所以如果你改变这个转发中断器，你实际上改变了特定重复块内的变量，而不是整个控制器。

这是一个demo你要做什么。

注意我将选定的属性分配给事物数组(它只是一个对象)。

更新12/12/14：添加新的代码块以阐明ng-switch的使用。上面的代码示例应该被考虑在做什么。

正如我在评论中提到的。开关应该是像JavaScript开关一样。这是用于硬编码的开关逻辑。所以例如在我的示例帖子中，只会有几种类型的帖子。你应该知道一段时间内你要打开的值的类型。

<div ng-repeat="post in posts">
  <div ng-switch on="post.type">

    <!-- post.type === 'image' -->
    <div ng-switch-when="image" class="post post-image">
      <img ng-src="{{ post.image }} />
      <div ng-bind="post.content"></div>
    </div>

    <!-- post.type === 'video' -->
    <div ng-switch-when="video" class="post post-video">
      <video ng-src="{{ post.video }} />
      <div ng-bind="post.content"></div>
    </div>

    <!-- when above doesn't match -->
    <div ng-switch-default class="post">
      <div ng-bind="post.content"></div>
    </div>
  </div>
</div>

您可以使用ng-if来实现相同的功能，您的工作是确定应用程序中有意义的内容。在这种情况下，后者更简洁，但也更复杂，如果模板更复杂，您可以看到它变得更加毛茸茸。基本的区别是ng-switch是声明式的，ng-if是必须的。

<div ng-repeat="post in posts">
  <div class="post" ng-class="{
      'post-image': post.type === 'image','post-video': post.type === 'video'">
    <video ng-if="post.type === 'video'" ng-src="post.video" />
    <img ng-if="post.type === 'image'" ng-src="post.image" />
    <div ng-bind="post.content" />
  </div>
</div>