在本文中，我们将解释ng-if，ng-show和ng-hide指令。
- ng-if指令：
AngularJS中的ng-if指令用于根据表达式删除或重新创建HTML元素的一部分。
如果其中的表达式为false，则将元素从DOM中完全删除。
如果表达式为true，则将元素添加到DOM中。
句法：
例子：
在以下示例中，当输入元素中包含任何文本时，将显示div内容，否则将被隐藏。
Enter Text:GeeksforGeeks
输出：
当输入字段中有任何文本时，标题div将添加到HTML DOM中并显示，但是当输入字段为空时，div将被删除且不显示。
- ng-show指令： AngluarJS中的ng-show指令用于显示或隐藏指定的HTML元素。
如果ng-show属性中的给定表达式为true，则将显示HTML元素，否则将隐藏HTML元素。
句法：
例子：
在以下示例中，选中其复选框后，将显示div内容，否则将被隐藏。
GeeksforGeeks
输出：
选中复选框后，HTML属性div设置为显示，否则隐藏它们。
- ng-hide指令： AngluarJS中的ng-hide指令用于显示或隐藏指定的HTML元素。
如果ng-hide属性中给出的表达式为true，则HTML元素将隐藏。
ng-hide也是AngularJS中预定义的CSS类，并将元素的显示设置为none 。
句法：
例子：
在此示例中，如果选中此复选框，则表示ng-hide属性为true，并且HTML元素将隐藏。
Show DIV:GeeksforGeeks
输出：
如果选中该复选框，格设置为隐藏的HTML属性，否则他们展示。
ng-if，ng-show和ng-hide之间的基本区别
| ng-if directive | ng-show directive | ng-hide directive |
|---|---|---|
| The ng-if directive removes or recreates a portion of the DOM tree based on an expression, Instead of hiding it. | The ng-show directive shows or hides the given HTML element based on the expression provided to the ng-show attribute | The ng-hide directive shows or hides the given HTML element based on the expression provided to the ng-hide attribute . |
| ng-if can only render data whenever the condition is true. It doesn’t have any rendered data until the condition is true. | ng-show can show and hide the rendered data, that is, it always kept the rendered data and show or hide on the basis of that directives. | ng-hide can show and hide the rendered data, that is, it always kept the rendered data and show or hide on the basis of that directives. |
因此，ng-if，ng-show和ng-hide指令之间存在相当大的差异，这使它们的用法有所不同。