angularjs中的条件ng-include

Posted 2023-02-23

【中文标题】angularjs中的条件ng-include

【英文标题】：Conditional ng-include in angularjs

【发布时间】：2013-04-05 03:24:06

【问题描述】：

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

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

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

【参考方案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

【讨论】：

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

该问题已在 v1.2.2-23ba287 code.angularjs.org/snapshot/angular.js 中修复

见github.com/angular/angular.js/issues/3627#issuecomment-23539882；在当前版本（1.2.*）中，您不能在同一元素上使用 ng-switch 和 ng-include，因此您需要类似： /div>

【参考方案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>

【参考方案3】：

其中一个答案的可读性更高的版本。加上将 ng-include 设置为 null 会删除元素 - 就像 ng-if。

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

【参考方案4】：

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

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

请注意，表达式x 不在单引号中，因此需要计算。详情请见http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA。

【讨论】：

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

【参考方案5】：

你也可以这样做

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

在你的控制器中

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

【讨论】：

真的很好。 ng-switch 标记的答案对我不起作用。

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