angularJSで条件付きでng-includeを行うにはどうすればよいですか?
たとえば、変数x
がに設定されている場合にのみ、何かを含めたいと思いますtrue
。
<div ng-include="/partial.html"></div>
angularJSで条件付きでng-includeを行うにはどうすればよいですか?
たとえば、変数x
がに設定されている場合にのみ、何かを含めたいと思いますtrue
。
<div ng-include="/partial.html"></div>
回答:
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>
あなたもすることができます
<div ng-include="getInclude()"></div>
あなたのコントローラーで
$scope.getInclude = function(){
if(x){
return "partial.html";
}
return "";
}
ng-switch
マークの答えは私のために動作しませんでした。
答えの1つをもう少し読みやすいバージョン。さらに、要素ng-include
をnull
削除するための設定-同様にng-if
。
<div ng-include="x ? 'true-partial.html' : null"></div>
条件が十分に単純であれば、条件ロジックをng-include式に直接配置することもできます。
<div ng-include="x && 'true-partial.html' || 'false-partial.html'"></div>
式x
は一重引用符で囲まれていないため、評価されることに注意してください。詳細については、http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrAを参照してください。
私は同様の問題に遭遇し、この発見が誰かを助けることができるかもしれません。リンクのクリック時に異なる部分を表示する必要がありますが、このシナリオでは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>