- 首页
- 其他开发
- Angular.js ng-switch-when 不使用动态数据?
Angular.js ng-switch-when 不使用动态数据?
[英] Angular.js ng-switch-when not working with dynamic data?
本文介绍了Angular.js ng-switch-when 不使用动态数据?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试让 Angular 根据我的数据生成一个 CSS 滑块.我知道数据在那里并且能够为按钮生成它，但是由于某种原因，代码不会填充 ng-switch-when.当我检查代码时，我看到了两次(我知道这是正确的，因为我只有两个项目):
<!-- ngSwitchWhen: {{assignment.id}} -->
我的实际代码:
<div class="btn-group assignments" style="display: block; text-align: center; margin-bottom: 10px"><span ng-repeat="赋值中的赋值"><button ng-click="thisAssignment = '{{assignment.id}}'" class="btn btn-primary">{{assignment.num}}</button></span>
<div class="well" style="height: 170px;"><div ng-switch="thisAssignment"><div class="assignments"><div ng-repeat="赋值中的赋值" ng-animate="'animate'"><div ng-switch-when='{{assignment.id}}' class="my-switch-animation"><h2>{{assignment.name}}</h2><p>{{assignment.text}}</p>
这就是我想要模拟的，尽管使用动态数据.http://plnkr.co/edit/WUCyCN68tDR1YzNnCWyS?p=preview
解决方案
来自 docs —
<块引用>
请注意，要匹配的属性值不能是表达式.他们是解释为要匹配的文字字符串值.例如，ng-switch-when=someVal"；将匹配字符串someVal"；不违反表达式的值$scope.someVal.
换句话说，ng-switch 用于模板中的硬编码条件.
你会像这样使用它:
<div ng-repeat="赋值中的赋值";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>
现在这可能不完全适合您的用例，因此您可能需要重新考虑您的策略.
Ng-If 可能是你所需要的——另外，你需要了解 孤立"范围.基本上，当您使用某些指令(例如 ng-repeat)时，您会创建与其父项隔离的新范围.因此，如果您在转发器内更改 thisAssignment，实际上是在更改该特定重复块内的变量，而不是整个控制器.
这里有一个演示，说明您要做什么.
注意我将 selected 属性分配给 things 数组(它只是一个对象).
2014 年 12 月 12 日更新:添加新代码块以阐明 ng-switch 的使用.应该考虑上面的代码示例不做什么.
正如我在评论中提到的.Switch 应该与 JavaScript 开关完全一样.它用于硬编码的切换逻辑.因此，例如在我的示例帖子中，只会有几种类型的帖子.您应该提前了解将要打开的值的类型.
<div ng-switch on="post.type"><!-- post.type === '图片'--><div ng-switch-when="image";class="post post-image"><img ng-src="{{ post.image }}/><div ng-bind="post.content"></div>
<!-- post.type === '视频'--><div ng-switch-when="video";class =发布视频后"><video ng-src="{{ post.video }}/><div ng-bind="post.content"></div>
<!-- 当上面不匹配时--><div ng-switch-default class="post"><div ng-bind="post.content"></div>
您可以使用 ng-if 实现相同的功能，您的工作是决定什么在您的应用程序中有意义.在这种情况下，后者更简洁，但也更复杂，如果模板更复杂，您会发现它变得更加复杂.基本区别是 ng-switch 是声明式的，ng-if 是命令式的.
<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";/>
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>
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>
EDIT: This is what I'm trying to emulate, though with dynamic data. http://plnkr.co/edit/WUCyCN68tDR1YzNnCWyS?p=preview
解决方案
From the docs —
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.
So in other words, ng-switch is for hardcoding conditions in your templates.
You would use it like so:
<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-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.
Here's a demo of what you're going for.
Notice I assign the selected property to the things array (it's just an object).
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.
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>
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-switch-when 不使用动态数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
