angularjsの条件付きng-include


93

angularJSで条件付きでng-includeを行うにはどうすればよいですか?

たとえば、変数xがに設定されている場合にのみ、何かを含めたいと思いますtrue

<div ng-include="/partial.html"></div>

回答:


120

Angular v1.1.5以降を使用している場合は、ng-ifも使用できます。

<div ng-if="x" ng-include="'/partial.html'"></div>

古いバージョンがある場合:

ng-switchを使用します。

<div ng-switch on="x">
   <div ng-switch-when="true" ng-include="'/partial.html'"></div>
</div>

フィドル


5
はい、現在1.2で壊れています:github.com/angular/angular.js/issues/3627
Mark Rajcok 2013


7
github.com/angular/angular.js/issues/3627#issuecomment-23539882を参照してください。現在のバージョン(1.2。*)では、ng-switchとng-includeを同じ要素で使用できないため、次のようなものが必要です:<div ng-switch-when = "true"> <div ng-include = "'something '"> </ div> <// div>
Maarten

68

あなたもすることができます

<div ng-include="getInclude()"></div>

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

$scope.getInclude = function(){
    if(x){
        return "partial.html";
    }
    return "";
}

本当にいい。ng-switchマークの答えは私のために動作しませんでした。
im1dermike 2015

1
コントローラはビ​​ューファイルの設定に適していますか?いいえ、@ Mark Rajcokの答えは真実です。
ivahidmontazer 2016年

16

答えの1つをもう少し読みやすいバージョン。さらに、要素ng-includenull削除するための設定-同様にng-if

<div ng-include="x ? 'true-partial.html' : null"></div>

11

条件が十分に単純であれば、条件ロジックをng-include式に直接配置することもできます。

<div ng-include="x && 'true-partial.html' || 'false-partial.html'"></div>

xは一重引用符で囲まれていないため、評価されることに注意してください。詳細については、http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrAを参照してください。


チェック条件と実際のインクルードがうまく分離されているので、受け入れられたソリューションは実際により読みやすくなっています。
トビアス2014

2

私は同様の問題に遭遇し、この発見が誰かを助けることができるかもしれません。リンクのクリック時に異なる部分を表示する必要がありますが、このシナリオではng-ifとng-switchの両方が機能していません(以下のコードは機能していません)。

<button type="button" class="btn btn-link" ng-click="viewType('LIST')">List All</button>
<button type="button" class="btn btn-link" ng-click="viewType('EDIT')">Edit</button>
<button type="button" class="btn btn-link" ng-click="viewType('VIEW')">View</button>

<section class="col-md-8 left-col">
    <span ng-if = "LIST">
        <div data-ng-include="'./app/view/articles/listarticle.html'">
    </span>
    <span ng-if = "EDIT">
        <div data-ng-include="'./app/view/articles/editorarticle.html'">
    </span>

</section>

だから私がやったことは、ng-ifを使用する代わりに、リンクのクリック時に、partialArticleUrl(コントローラーのモデル)の値を更新し、htmlで以下のコードを宣言することです。

        <section class="col-md-8 left-col">
            <div data-ng-include="partialArticleUrl">
        </section>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.