Question

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

例如，如果变量x设置为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>

Fiddle

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-include表达式中：

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

请注意，表达式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>

有条件的ng-include in angularjs

5 个答案: