原文:https://www . geesforgeks . org/define-ng-if-ng-show-and-ng-hide/

在本文中，我们将解释 ng-if、ng-show 和 ng-hide 指令。

• ng-if Directive:

  AngularJS 中的 ng-if 指令用于根据表达式移除或重新创建 HTML 元素的一部分。

  如果里面的表达式是假的，那么元素就完全从 DOM 中移除了。

  如果表达式为真，那么元素将被添加到 DOM 中。

  语法:

  ```ts
  

  ```

  示例:

  在以下示例中，当输入元素中有任何文本时，将显示 div 内容，否则它将被隐藏。

  ```ts
  
  

  Enter Text:

  
  

  GeeksforGeeks
  

  ```

  输出:

  当输入字段中有任何文本时，标题 div 会添加到 HTML DOM 中并显示，但当输入字段为空时，div 会被移除并不显示。




• ng-show Directive: The ng-show Directive in AngluarJS is used to show or hide the specified HTML element.

  如果在 ng-show 属性中给定的表达式为真，那么 HTML 元素将显示，否则将隐藏该 HTML 元素。

  语法:

  ts


  示例:

  在下面的例子中，当他们的复选框被选中时，div 内容将被显示，否则它将被隐藏。

  ```ts
  
    
      
      
  

  
    

  GeeksforGeeks
  

  ```

  输出:

  选中复选框时，HTML 属性 div 被设置为显示，否则隐藏。




• ng-hide Directive: The ng-hide Directive in AngluarJS is used to show or hide the specified HTML element.

  如果 ng-hide 属性中给出的表达式为真，则 HTML 元素隐藏。

  ng-hide 也是 AngularJS 中预定义的 CSS 类，将元素的显示设置为 none 。

  语法:

  ```ts
  

  ```

  示例:

  在这个例子中，如果复选框被选中，这意味着 ng-hide 属性为真，HTML 元素将被隐藏。

  ```ts
  
    
      
      
  

  Show DIV:

  
     

  GeeksforGeeks
  

  ```

  输出:

  选中复选框时， HTML 属性 div 设置为隐藏，否则显示。

ng-if、ng-show 和 ng-hide 的基本区别

因此，ng-if、ng-show 和 ng-hide 指令之间有相当大的差异，这使得它们的用法不同。