Angular.js ng-switch-何时不使用动态数据？

Question

我正在尝试让Angular根据我的数据生成CSS滑块。我知道数据已经存在，并且能够为按钮生成数据，但是由于某种原因，代码不会填充ng-
switch-。当我检查代码时，我会看到两次（我知道是正确的，因为我只有两个项目）：

<div ng-repeat="assignment in assignments" ng-animate="'animate'" class="ng-scope">
    <!-- ngSwitchWhen: {{assignment.id}} -->
</div>

我的实际代码：

<div ng-init="thisAssignment='one'">
     <div class="btn-group assignments" style="display: block; text-align: center; margin-bottom: 10px">
         <span ng-repeat="assignment in assignments">
              <button ng-click="thisAssignment = '{{assignment.id}}'" class="btn btn-primary">{{assignment.num}}</button>
         </span>
     </div>

     <div class="well" style="height: 170px;">
         <div ng-switch="thisAssignment">
              <div class="assignments">
                   <div ng-repeat="assignment in assignments" ng-animate="'animate'">
                        <div ng-switch-when='{{assignment.id}}' class="my-switch-animation">
                        <h2>{{assignment.name}}</h2>
                        <p>{{assignment.text}}</p>
                   </div>
              </div>
         </div>  
    </div>  
</div>

编辑：这是我要模拟的内容，尽管带有动态数据。http://plnkr.co/edit/WUCyCN68tDR1YzNnCWyS?p=preview

Answer 1

来自文档 -

请注意，要匹配的属性值不能是表达式。它们被解释为要匹配的文字字符串值。例如，ng-switch-when =“ someVal”将匹配字符串“
someVal”，而不是表达式$ 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可能正是您所需要的-
另外，您需要了解“隔离的”范围。基本上，当您使用某些指令（例如ng-
repeat）时，会创建与其父级隔离的新作用域。因此，如果thisAssignment在转发器内部进行更改，则实际上是在更改该特定重复块内部的变量，而不是整个控制器。

这是您要做什么的演示。

注意，我将选定的属性分配给things数组（它只是一个对象）。

更新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>