条件ng包含在angularjs中

如何在angularJS中有条件地包含ng

例如，我只想在变量

x

设置为

true

时包含一些内容

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

---

如果您使用的是Angular v1.1.5或更高版本，还可以使用：

---

如果您有任何旧版本：

使用：

您也可以这样做

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

---

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

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

---

注意表达式

x

不在单引号中，因此需要计算。有关更多详细信息，请参阅。

其中一个答案的可读性稍高一点的版本。另外，将

ng include

设置为

null

会删除元素，就像

ng if

一样

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

---

我遇到了一个类似的问题，也许这个发现可以帮助某些人。我必须在点击链接时显示不同的部分，但ng if和ng开关在这种情况下都不起作用（下面的代码不起作用）

列出所有
编辑
看法

所以，我所做的不是使用ng if，而是在单击链接时更新partialArticleUrl的值（这是控制器中的一个模型）并在html上声明下面的代码

        <section class="col-md-8 left-col">
            <div data-ng-include="partialArticleUrl">
        </section>

是的，它目前已在1.2中被打破：该问题已在v1.2.2-23ba287中修复，请参阅；在当前版本（1.2.*）中，您不能在同一个元素上使用ng switch和ng include，因此您需要这样的东西：我想说，接受的解决方案实际上更可读，因为检查条件和实际include很好地分开了。非常好。

ng开关

标记的答案对我不起作用。控制器是否适合设置视图文件？马克·拉科克的回答是正确的。

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

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

<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>

        <section class="col-md-8 left-col">
            <div data-ng-include="partialArticleUrl">
        </section>