Angular.js NG-开关时不与动态数据的工作？ [英] Angular.js ng-switch-when not working with dynamic data?

问题描述

我试图让角生成根据我的数据CSS滑块。我知道数据是存在的，我能产生它的按钮，但是由于某些原因，NG-开关时，code将不填充。当我检查code，我看这两次（我知道是正确的，因为我只有两个项目）：

I'm trying to get Angular to generate a CSS slider based on my data. I know that the data is there and am able to generate it for the buttons, but the code won't populate the ng-switch-when for some reason. When I inspect the code, I see this twice (which I know to be correct as I only have two items):

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

我的实际code：

My actual code:

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

编辑：这就是我试图效仿，但与动态数据。 <一href=\"http://plnkr.co/edit/WUCyCN68tDR1YzNnCWyS?p=$p$pview\">http://plnkr.co/edit/WUCyCN68tDR1YzNnCWyS?p=$p$pview

This is what I'm trying to emulate, though with dynamic data. http://plnkr.co/edit/WUCyCN68tDR1YzNnCWyS?p=preview

推荐答案

从文档 -

请注意，要匹配的属性值，不能前pressions。他们是
  除preTED作为文字字符串值来匹配。例如，NG-开关时=someVal
  将匹配字符串someVal不违背EX pression的价值
  $ scope.someVal。

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-开关是在模板中硬编码的条件。

So in other words, ng-switch is for hardcoding conditions in your templates.

您会使用它像这样：

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

现在这也许不完全适合你的使用情况，因此有可能你就必须重新考虑你的策略。

Now this might not fit your use case exactly, so it's possible you'll have to rethink your strategy.

伍 - 如果可能是你所需要的 - 也是，你需要知道的孤立范围。基本上当你使用某些指令，例如NG重复，您可以创建这些从他们的父母分离的新范围。所以，如果你改变 thisAssignment 中继器里面，你实际上改变这种特定重复块里面的变量，而不是整个控制器。

Ng-If is probably what you need — also, you need to be aware of "isolated" scopes. Basically when you use certain directives, like ng-repeat, you create new scopes which are isolated from their parents. So if you change thisAssignmentinside a repeater, you're actually changing the variable inside that specific repeat block and not the whole controller.

下面是你要什么的演示。

请注意，我分配选定属性设置为的事情阵列（它只是一个对象）。

Notice I assign the selected property to the things array (it's just an object).

更新14年12月12日：添加code的新块澄清使用 NG-开关。在code上面的例子应该考虑什么的不可以做的。

Update 12/12/14: Adding a new block of code to clarify the use of ng-switch. The code example above should be considered what not to do.

我在我的评论中提到。开关应考虑酷似一个J​​avaScript开关。这是硬codeD开关逻辑。因此，例如在我的例子帖子，也有只将是几类职位。你应该知道的时候头类型的值，你将要接通。

As I mentioned in my comment. Switch should be thought about exactly like a JavaScript switch. It's for hardcoded switching logic. So for instance in my example posts, there are only going to be a few types of posts. You should know a head of time the types of values you are going to be switching on.

<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-如果，这是你的工作，以决定什么使你的应用程序中的感觉。在这种情况下，后者更简洁，但也更复杂，你可以看到它变得更加毛茸茸如果模板是任何更复杂。基本的区别是 NG-开关是声明， NG-如果是势在必行的。

You could implement this same functionality with ng-if, it's your job to decide what makes sense within your application. In this case the latter is much more succinct, but also more complicated, and you could see it getting much more hairy if the template were any more complex. Basic distinction is ng-switch is declarative, ng-if is imperative.

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

这篇关于Angular.js NG-开关时不与动态数据的工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！