使用AngularJS创建渲染条件

Alo*_*lon 46 javascript angularjs

我知道如何在AngularJS中创建一个视图条件,它将显示或隐藏依赖于条件的dom元素:

<div ng-show="{{isTrue}}">Some content</div>
Run Code Online (Sandbox Code Playgroud)

但是如何创建一个渲染条件来确定是否渲染div?

Umu*_*acı 69

更新angularjs 1.1.5及更高版本的用户(1.0.7中不支持):

相关提交:https: //github.com/angular/angular.js/commit/2f96fbd17577685bc013a4f7ced06664af253944

Angular现在有一个条件渲染指令:ngIf.

用法:

<div ng-if="conditional_expression"></div>
Run Code Online (Sandbox Code Playgroud)

请注意,使用ngIf删除元素时,其范围将被销毁,并且在还原元素时会创建新范围

文档:指令-ngIf

对于legacy angularjs用户:

ngShow指令有条件地隐藏/显示元素.这将在一个新的稳定版本中进行更改,现在可以在unstable发行版中使用1.1.5.

如果要在DOM上有条件地添加/删除项目,请使用ngSwitch.

<div ng-switch="showMe">
    <div ng-switch-when="true">Hello!</div>
</div>
Run Code Online (Sandbox Code Playgroud)

实际上,这个指令是为处理1个以上的情况而创建的,但你也可以这样使用它.有关更复杂用法的示例,请参阅答案.