angularjs - angularjs中的条件ng-include

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>

小提琴

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>