带ng-repeat的AngularJS if语句

fdbelqdn 于 2023-03-11 发布在 Angular

关注(0)|答案(5)|浏览(264)

我在重复语句旁边使用if时遇到了麻烦。
我正在获取数据，如下所示：

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"

因此，如果模块的类型是image，我想得到image。如果模块的类型是embed，我想得到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>

如果我取出ng-if就可以正常工作，控制台输出以下错误：

Error: Multiple directives [ngRepeat, ngIf] asking for transclusion on: <!-- ngRepeat: project in project.modules -->

angularjs

来源：https://stackoverflow.com/questions/26424111/angularjs-if-statement-with-ng-repeat

5条答案

按热度按时间

ndh0cuux1#

你可以使用filter来代替ngIf。你的代码应该像这样：

<div ng-repeat="project in project.modules | filter: { type: 'image' }">

它会起作用的。
您试图在代码中执行的解决方案不能像ngIf和ngRepeat那样执行，因为它们都试图删除和替换一些元素，并执行一些转换。
检查此问题https://github.com/angular/angular.js/issues/4398
还要检查过滤器https://docs.angularjs.org/tutorial/step_09的使用情况
此问题应有助于使用ngRepeat和过滤器ng-repeat :filter by single field

赞(0）回复(0）举报 2023-03-11

eeq64g8w2#

这是因为您必须在ng-repeat块中执行if条件。

<label ng-repeat="elem in list">
     <div ng-if="...">
         show something for this condition
     </div>

  </label>

为什么你需要ng-if和ng-repeat放在一起？

赞(0）回复(0）举报 2023-03-11

wlsrxk513#

屏幕上应仅显示“文章”和“文章1

<li ng-repeat="value in values" ng-if="value.name == 'article' || value.name == 'article1'">

<label>{{value.name}}</label>

赞(0）回复(0）举报 2023-03-11

zzwlnbp84#

你不能在同一个元素上同时使用ng-repeat和ng-if，因为它们都想删除和替换整个元素。这是有道理的--当ng-repeat说“hey draw this”而ng-if说“hey no don 't draw this”时，你会怎么做？
我认为这里最好的解决方案是预处理你的数组，只包含你想要的记录，然后ng-repeat覆盖它，不包含ng-if。你也可以把ng-if移到ng-repeat元素内部的一个元素，这样就不会有关于显示和隐藏什么的歧义。

赞(0）回复(0）举报 2023-03-11

ehxuflar5#

您也可以只使用ngHide或ngShow根据特定条件动态显示和隐藏元素。

<div ng-repeat="project in project.modules" ng-show="project.type == 'image'">
    <img src="{{ project.src }}"  class="img-responsive" alt="{{ project.name }}"/>
</div>

赞(0）回复(0）举报 2023-03-11

我来回答

带ng-repeat的AngularJS if语句

5条答案

相关问题

热门标签

最新问答