Javascript 带有 ng-repeat 的 AngularJS if 语句
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26424111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS if statement with ng-repeat
提问by Jo?o Colucas
I'm having trouble trying to use an if alongside a repeat statement.
我在尝试在重复语句旁边使用 if 时遇到问题。
I'm fetching data, as follows:
我正在获取数据，如下所示：
modules: Array[1]
0: Object
embed: "<iframe width="600" height="338" src="https://www.youtube.com/embed/UqdDAn4_iY0"
frameborder="0" allowfullscreen="" style="margin:0px auto;display:block;"></iframe>"
type: "embed"
1: Object
src: "https://m1.behance.net/rendition/modules/127899607/disp/072cebf2137c78359d66922ef9b96adb.jpg"
type: "image"
So, if the module has a type of image, i want to get the image. If it has type embed, i want to get the iframe. My current view code is:
因此，如果模块具有图像类型，我想获取图像。如果它有类型嵌入，我想获得 iframe。我当前的视图代码是：
<div ng-repeat="project in project.modules" ng-if="project.type == 'image'">
<img src="{{ project.src }}" class="img-responsive img-centered" alt="{{ project.name }}"/>
</div>
It works well if i take out ng-if. Console outputs the following error:
如果我取出 ng-if 效果很好。控制台输出以下错误：
Error: Multiple directives [ngRepeat, ngIf] asking for transclusion on: <!-- ngRepeat: project in project.modules -->
回答by fikry
You can use filter instead of using ngIf. Your code shall be like:
您可以使用过滤器而不是使用 ngIf。你的代码应该是这样的：
<div ng-repeat="project in project.modules | filter: { type: 'image' }">
And it shall work.
它会起作用。
The solution you're trying to do in your code can't be done as ngIf and ngRepeat both trying to remove and replace some elements and do some transclusion.
您尝试在代码中执行的解决方案不能像 ngIf 和 ngRepeat 一样尝试删除和替换某些元素并进行一些嵌入。
Check this issue https://github.com/angular/angular.js/issues/4398
检查这个问题https://github.com/angular/angular.js/issues/4398
Also check the usage of filters https://docs.angularjs.org/tutorial/step_09
还要检查过滤器的使用情况https://docs.angularjs.org/tutorial/step_09
and this question shall be useful with using ngRepeat with filters ng-repeat :filter by single field
这个问题在使用 ngRepeat 和过滤器ng-repeat 时很有用：按单个字段过滤
回答by nsanglar
This is because you have to do the if condition inside the ng-repeat block. For example:
这是因为您必须在 ng-repeat 块中执行 if 条件。例如：
<label ng-repeat="elem in list">
<div ng-if="...">
show something for this condition
</div>
</label>
Why do you need the ng-if to be alongside the ng-repeat?
为什么需要 ng-if 与 ng-repeat 一起使用？
回答by adio
this should display only "article" and "article1" on screen
这应该只在屏幕上显示“文章”和“文章1”
<li ng-repeat="value in values" ng-if="value.name == 'article' || value.name == 'article1'">
<label>{{value.name}}</label>
回答by Riley Lark
You can't use ng-repeatand ng-ifon the same element, because both of them want to do things like remove & replace the entire element. This kind of makes sense - what would you do when ng-repeatis saying "hey draw this" but ng-ifis saying "hey no don't draw this?"
你不能在同一个元素上使用ng-repeatand ng-if，因为他们都想做诸如删除和替换整个元素之类的事情。这是有道理的 - 当你ng-repeat说“嘿画这个”但ng-if说“嘿不不要画这个”时，你会怎么做？
I think the best solution here would be to preprocess your array to only include the records you want, and then ng-repeatover that with no ng-if. You could also move the ng-ifto an element inside the ng-repeatelement, so that there is no ambiguity about what's shown & hidden.
我认为这里最好的解决方案是预处理你的数组以只包含你想要的记录，然后ng-repeat在没有ng-if. 您还可以将 移动ng-if到元素内的ng-repeat元素，这样显示和隐藏的内容就不会产生歧义。
