angularjs中的条件ng-include

93

如何在angularJS中有条件地执行ng-include？

例如，如果变量x设置为，我只想包含一些内容true。

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

angularjs angularjs-ng-include

— JustGoscha
source

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>

小提琴

— 马克·拉杰科克
source

5

是的，它目前在1.2版本中被打破：github.com/angular/angular.js/issues/3627

— Mark Rajcok

2

这个问题已在v1.2.2-23ba287 code.angularjs.org/snapshot/angular.js

— Eugene Gluhotorenko 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 "";
}

— 加纳拉吉
source

真的很好。该ng-switch标记的回答并没有为我工作。

— im1dermike

1

Controller是否适合于设置视图文件？我认为，不。@ Mark Rajcok的答案是正确的。

— ivahidmontazer's

16

答案之一的可读性更高。加上设置ng-include可null删除元素-就像ng-if。

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

— 拉法·林德曼
source

11

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

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

请注意，该表达式x不是用单引号引起来的，因此需要对其求值。有关更多详细信息，请参见http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA。

— dspies
source

我想说，由于检查条件和实际包含项很好地分开了，因此可接受的解决方案实际上更具可读性。

— Tobias

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>

— KanhuP2012
source