AngularJS 是一款流行的前端框架。在 AngularJS 中，ng-if 和 ng-switch 是两种用于条件渲染的指令。本文将深入探讨这两个指令的用法和关键点。
ng-if 指令
ng-if 指令用于在 DOM 中插入或移除元素，基于条件判断。如果条件是 true，则元素被插入到 DOM 中；如果条件是 false，则元素从 DOM 中移除。
ng-if 指令的语法如下：
<element ng-if="expression"></element>
其中，expression 是一个布尔表达式。如果 expression 的值为 true，则 element 元素将被插入 DOM 中，反之则进行移除。
用法示例
在以下示例中，我们使用 ng-if 指令根据表单状态显示不同的提示：
<form name="myForm">
<label for="answer">What is the answer?</label>
<input id="answer" name="answer" ng-model="answer" required>
<div class="alert alert-danger" ng-if="myForm.$submitted && myForm.answer.$error.required">Answer is required.</div>
<div class="alert alert-success" ng-if="myForm.$submitted && !myForm.answer.$error.required">The answer is {{answer}}!</div>
<button type="submit" class="btn btn-primary" ng-click="myForm.$submitted=true">Submit</button>
</form>在上述示例中，alert-danger 和 alert-success 形式的提示只有在表单提交并且满足特定条件时才会显示。
关键点
ng-if 指令不建议与 ng-repeat 指令同时使用，因为 ng-repeat 指令已经在 DOM 中创建了元素，而 ng-if 指令将尝试删除这些元素，这会导致额外的性能消耗。
ng-if 指令可以与 ng-else 指令结合使用来显示不同的元素根据条件。例如：
<div ng-if="expression">Show this element</div> <div ng-if="!expression">Show that element</div>
ng-switch 指令
ng-switch 指令用于在多个 DOM 元素之间切换，基于条件判断。当表达式的值与某个 case 相等时，与该 case 关联的元素将被插入到 DOM 中。
ng-switch 指令常常与 ng-switch-case 指令和 ng-switch-default 指令结合使用。ng-switch-case 指令指定了某个特定条件的情况下要显示的元素，而 ng-switch-default 指令指定了当没有条件匹配时要显示的元素。
ng-switch 指令的语法如下：
<div ng-switch="expression"> <div ng-switch-case="case1">Show this element for case1</div> <div ng-switch-case="case2">Show this element for case2</div> <div ng-switch-default>Show this element if no case matches</div> </div>
用法示例
在以下示例中，我们使用 ng-switch 指令根据表单状态显示不同的提示：
-- -------------------- ---- -------
----- --------------
------ ----------------- -- --- ---------------
------ ----------- ------------- ----------------- ---------
---- ---------------------------- -- -------------------------------
---- --------------------- ------------ -------------------- -- ---------------
---- ----------------- ------------ ------------------ ------ -- -----------------
------
------- ------------- ---------- ------------ -------------------------------------------------
-------在上述示例中，alert-danger 和 alert-success 形式的提示只有在表单提交并且满足特定条件时才会显示。
关键点
ng-switch 指令可以与 ng-repeat 指令同时使用。
ng-switch 指令不建议大规模使用，因为任何支持的元素都必须存在于 DOM 中，而这可能会导致性能问题。
ng-switch-default 指令是可选的，如果没有与 ng-switch-case 指令匹配的条件，则不会显示任何页面元素。
总结
ng-if 和 ng-switch 是常见的 AngularJS 指令，用于条件渲染。本文介绍了这两个指令的用法和关键点，并提供了示例代码。在开发 AngularJS 应用程序时，合理使用这两个指令可以提高开发效率和性能，并使代码更易于理解和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6641eed2d3423812e4feef2d