NG重複並呈現不同的HTML按條件語句

因此，在角度我們可以做NG重複並呈現不同的HTML按條件語句

<tag ng-repeat="item in items">content..</tag>

或

<tag ng-repeat-start="item in items"></tag><tag ng-repeat-end></tag>

我在想，如果有一種方法來有條件地創建HTML，取決於一個javascript對象的屬性值。我知道服務器端模板引擎讓混合代碼和HTML，所以我想知道是否有某種方式，我可以實現像下面這樣的東西。

contents of someview.html 

<div ng-controller="someController as ctrl"> 

{{foreach(ctrl.items) 

{{ 
    if (item.type == 'textbox') 
    '<input type="text" value="item.value" />' 
}} 

{{ 
    if (item.type == 'checkbox') 
    '<input type="checkbox" checked="item.value" />' 
}} 

end-foreach}} 

</div>

我想我只想用ng-if語句，但它並不會削減它，因爲我不希望它的每一個對象冗餘遍歷每個不同的元素類型和我也有一定的順序我希望在生成的html元素之間保留，而不是簡單地首先生成所有文本框元素，然後再生成所有複選框等元素。

所以

<input type="textbox" ng-if="item.type == 'textbox'" ng-repeat="item in items"/> 

<input type="checkbox" ng-if="item.type == 'checkbox'" ng-repeat="item in items"/>

不會削減它。

我想我將不得不使用一個指令和裝飾一個屬性的元素。該指令是否可以用自定義HTML覆蓋它所聲明的元素？

<tag ng-repeat="item in item"><div ng-include="getTemplate(item)"></div></tag>

，並在你的控制器：

來源

2016-09-15 LaserBeak

你將不得不重複保存的'NG-repeat'一個'div'或'span'，否則你就必須創造條件替換模板的自定義指令。你不能在同一個元素上定義的'ng-repeat'和'ng-if'內聯執行這個任務。 – Claies

@taguenizy問題是，如果有文本框，然後複選框，第一個會打印所有的文本框，然後第二個會打印所有的複選框，而不是按原來的順序混合。 – Claies

由我看來嘗試使用ng-include有條件，非常乾淨的方式

$scope.getTemplate = function(item){ 
    if(item.type == 'textbox') 
    return 'textboxTemplate.html'; 

    if(item.type == 'checkbox') 
    return 'checkboxTemplate.html'; 

    //and so on... 
}

然後，聲明你的腳本，或者通過<script>標籤或通過$templateCache服務：

<script type="text/ng-template" id="checkboxTemplate.html"> 
    <input type="checkbox" ng-model="item.value"/> 
</script>

來源

2016-09-15 11:58:16 Luxor001

極好的想法，以動態的形式 –

您可以使用t他ng-repeat指令作爲一個元素。這樣你可以將ngIf條件的標籤作爲其內容。

<ng-repeat ng-repeat="item in vm.items"> 
     <tag ng-if="item.type == 'textbox'"> 
      <input type="textbox"> 
     </tag> 
     <tag ng-if="item.type == 'checkbox'"> 
      <input type="checkbox"/> 
     </tag>    
    </ng-repeat>

來源

2016-09-16 02:14:18 JayChase

這是非常接近問題的建議。 –

NG重複並呈現不同的HTML按條件語句

回答

相關問題