web-dev-qa-db-ja.com

angularjsの条件付きng-include

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

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

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

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>

フィドル

118
Mark Rajcok

あなたもできる

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

コントローラーで

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

回答の1つをもう少し読みやすくしたバージョン。さらに、ng-includeをnullに設定すると、ng-ifと同様に要素が削除されます。

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

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

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

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

11
dspies

私は同様の問題に遭遇し、この発見が誰かを助けるかもしれない。リンクのクリック時に異なるパーシャルを表示する必要がありますが、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>
2
KanhuP2012