javascript - 使用 AngularJS 创建渲染条件

Question

我知道如何在 AngularJS 中创建视图条件，它将根据条件显示或隐藏 dom 元素：

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

但是如何创建一个渲染条件来确定是否渲染 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>

请注意，当使用 ngIf 删除元素时，它的作用域被破坏，并且在元素恢复时创建一个新作用域

文档：directive-ngIf

对于旧版 angularjs 用户：

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

如果您想有条件地添加/删除 DOM 上的项目，请使用可以使用ngSwitch.

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

实际上，该指令是为处理超过 1 个案例而创建的，但您也可以这样使用它。有关更复杂用法的示例，请参阅此答案。

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

至少有两种方法可以做到这一点：

• 使用模板渲染一些部分
• 使用带有条件渲染函数的简单表达式（参见下面的小提琴和描述）

对于简单的组件，我建议坚持渲染功能。很容易理解。

$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指令。我相信这会很好地为您服务。