AngularJS if語句與ng-repeat

我在嘗試使用if和重複語句時遇到了問題。AngularJS if語句與ng-repeat

我取數據，具體如下：

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"

所以，如果模塊具有一個類型的圖像，我想要得到的圖像。如果它有類型嵌入，我想要獲取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 -->

來源

2014-10-17 João Colucas

您可以使用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

來源

2014-10-17 12:15:09 phikry

你不能在相同的元素使用ng-repeat和ng-if，因爲他們都希望做的事情一樣去除&更換整個部件。這種說法是有道理的 - 當ng-repeat說「嘿這個」時，你會怎麼做，但是ng-if在說「嘿，不要畫這個？」

我認爲這裏最好的解決方案是預處理你的陣列，只包括你想要的記錄，然後ng-repeat而不是ng-if。您還可以將ng-if移動到ng-repeat元素中的元素，以便隱藏顯示&的內容時不會含糊不清。

來源

2014-10-17 11:36:14

這是因爲你必須在ng-repeat塊內做if條件。例如：

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

    </label>

爲什麼你需要ng-if和ng-repeat一起？

來源

2014-10-17 11:37:40 nsanglar

謝謝你，這是做的伎倆！ :) – 2014-10-17 12:13:57

這可能應該是根據你的問題選擇的答案。 – user1012500 2015-10-15 10:19:43

這應該只顯示「文章」和「第一條」是有益的屏幕上

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

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

來源

2015-12-23 13:58:40 adio

AngularJS if語句與ng-repeat

回答

相關問題