ngのリピートと

Question

が

ので角度で私たちにできる条件文ごとに異なる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要素の間に保存したいのですが、最初にすべてのtextbox要素を生成してから、すべてのチェックボックスなどの要素を生成するだけではありません。

ので

<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で上書きできますか？

Answer 1

私の意見で、条件付きで非常にきれいな方法をng-includeを使用してみてください：

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

とあなたのコントローラで：

$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> 

Answer 2

彼は要素として指令を繰り返す。そうすれば、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>