用AngularJS做一个渲染条件

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

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

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

Answer 1

更新为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的，但是你也可以这样使用它。 看到这个答案更复杂的用法的例子。

Answer 2

推荐的方法是使用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> 

Answer 3

至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度指令来包装它，这会给你很好的标记和无限的可能性！

Answer 4

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