用AngularJS做一个渲染条件

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

<div ng-show="{{isTrue}}">Some content</div> 

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

更新为angularjs 1.1.5及以上用户(1.0.7不支持):

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

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

用法:

 <div ng-if="conditional_expression"></div> 

请注意,当使用ng移除元素时,如果其作用域被销毁,并且在元素被恢复时创build新的作用域

文档:directive-ngIf

对于传统的angularjs用户:

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

如果你想有条件地添加/删除DOM上的项目,使用可以使用ngSwitch

 <div ng-switch="showMe"> <div ng-switch-when="true">Hello!</div> </div> 

实际上,这个指令是为了处理超过1的情况而创build的,但是你也可以这样使用它。 看到这个答案更复杂的用法的例子。

推荐的方法是使用ng-include

例如: http : //jsfiddle.net/api/post/library/pure/

 <div ng-app=""> <div ng-controller="Ctrl"> <select ng-model="template" ng-options="t.name for t in templates"> <option value="">(blank)</option> </select> url of the template: <tt>{{template.url}}</tt> <hr/> <div ng-include src="template.url"></div> </div> <!-- template1.html --> <script type="text/ng-template" id="template1.html"> Content of template1.html </script> <!-- template2.html --> <script type="text/ng-template" id="template2.html"> Content of template2.html </script> </div> 

至less有两种方法可以做到这一点:

  • 渲染一些部分使用模板
  • 使用简单的expression与条件渲染function(见下面的小提琴和说明)

对于简单的组件,我build议坚持渲染function。 很容易理解。

 $scope.render = function(condition) { return condition ? "This is rendered when condition == TRUE" : "This is rendered when condition == FALSE"; }; 

只需将其包含在您的HTML中,如下所示:

 {{render(true)}} 

你也可以用angular度指令来包装它,这会给你很好的标记和无限的可能性!

看看angular-ui if指示。 我相信这会很好地为你服务。