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在转发器内部进行更改,则实际上是在更改特定重复块内的变量而不是整个控制器.

这是一个你想要的演示.

注意我将selected属性分配给things数组(它只是一个对象).

更新12/12/14:添加新的代码块以阐明其使用ng-switch.上面的代码示例应该被认为是不应该做的.

正如我在评论中提到的那样.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>

Answer 2

乔恩绝对是对的.Angular不支持动态ngSwitchWhen值.但我想要它.我发现使用我自己的指令代替它实际上非常简单ngSwitchWhen.它不仅支持动态值,而且还支持每个语句的多个值(类似于JS开关直通).

有一点需要注意,它只在编译时计算一次表达式,因此必须立即返回正确的值.为了我的目的,这很好,因为我想使用应用程序中其他地方定义的常量.它可能被修改为动态地重新评估表达式,但这需要更多的测试ngSwitch.

我使用角度1.3.15,但我用角度1.4.7进行了快速测试,它在那里工作得很好.

Plunker演示

代码

module.directive('jjSwitchWhen', function() {
    // Exact same definition as ngSwitchWhen except for the link fn
    return {
        // Same as ngSwitchWhen
        priority: 1200,
        transclude: 'element',
        require: '^ngSwitch',
        link: function(scope, element, attrs, ctrl, $transclude) {
            var caseStms = scope.$eval(attrs.jjSwitchWhen);
            caseStms = angular.isArray(caseStms) ? caseStms : [caseStms];

            angular.forEach(caseStms, function(caseStm) {
                caseStm = '!' + caseStm;
                ctrl.cases[caseStm] = ctrl.cases[caseStm] || [];
                ctrl.cases[caseStm].push({ transclude: $transclude, element: element });
            });
        }
    };
});

用法

调节器

  $scope.types = {
      audio: '.mp3', 
      video: ['.mp4', '.gif'],
      image: ['.jpg', '.png', '.gif'] // Can have multiple matching cases (.gif)
  };

模板

  <div ng-switch="mediaType">
    <div jj-switch-when="types.audio">Audio</div>

    <div jj-switch-when="types.video">Video</div>

    <div jj-switch-when="types.image">Image</div>

    <!-- Even works with ngSwitchWhen -->
    <div ng-switch-when=".docx">Document</div>

    <div ng-switch-default>Invalid Type</div>
  <div>