有条件的ng-include在angularjs中

我怎样才能在angularJS中有条件地执行ng-include？

例如，我只想包含一些东西，如果variablesx被设置为true 。

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

Answer 1

如果您正在使用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> 

小提琴

Answer 2

你也可以做

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

在你的控制器中

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

Answer 3

其中一个答案的可读性略高一点。 加设置ng-include为null会删除元素 – 就像ng-if 。

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

Answer 4

如果条件足够简单，您还可以直接将条件逻辑放在ng-includeexpression式中：

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

请注意expression式x不在单引号中，因此被评估。 有关更多详细信息，请参阅http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA 。

Answer 5

我遇到了类似的问题，可能是这个发现可以帮助别人。 我必须在点击链接上显示不同的部分，但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>