在 AngularJS 中，ng-switch 指令可以根据指定的条件，动态地切换显示内容。与 ng-if 相比，ng-switch 可以更方便地处理多个条件的情况。本文将详细介绍 ng-switch 的用法，并提供示例代码，帮助读者更好地理解和使用这个指令。
ng-switch 的基本用法
ng-switch 指令的基本语法如下：
<div ng-switch="expression"> <div ng-switch-when="value1">Content for value1</div> <div ng-switch-when="value2">Content for value2</div> <<div ng-switch-default>Default content</div> </div>
其中，ng-switch 指令的值为一个表达式，用来判断要显示哪个子元素。ng-switch-when 指令用来指定每个条件对应的显示内容，ng-switch-default 指令用来指定默认的显示内容。当表达式的值与某个 ng-switch-when 指令的值相同时，对应的内容将被显示出来，如果都不匹配，则显示 ng-switch-default 指令的内容。
下面是一个简单的例子，用 ng-switch 实现一个简单的登录页面：
-- -------------------- ---- -------
---- ------------------------
---- -----------------------
------
------------------------
------ ----------- --------------------
------------------------
------ --------------- --------------------
------- ---------------------------------
-------
------
---- ----------------------
----------- -----------------
------- -----------------------------------
------
---- ------------------
---------- ----- -----------
------
------在这个例子中，我们使用 ng-switch 指令根据登录状态的不同显示不同的内容。当登录状态为 false 时，显示登录表单；当登录状态为 true 时，显示欢迎信息和注销按钮；如果登录状态既不是 false 也不是 true，则显示一个错误信息。
ng-switch 与 ng-repeat 的结合使用
ng-switch 指令也可以与 ng-repeat 指令结合使用，实现更灵活的条件判断。下面是一个例子，用 ng-switch 和 ng-repeat 实现一个简单的商品列表：
-- -------------------- ---- -------
---- ---------------------
---- ----------------------
----
--- --------------- -- -------------------------
-----
------
---- ----------------------
---- -------------
---- ------------ --------------- -- --------------------------
------
------
---- ------------------
---------- ---- ---------
------
------
------- ----------------------------------- -------------
------- ----------------------------------- -------------在这个例子中，我们使用 ng-switch 和 ng-repeat 指令实现了一个商品列表，可以切换不同的显示模式。当 viewMode 的值为 list 时，显示一个 ul 列表，每个商品显示为一个 li 元素；当 viewMode 的值为 grid 时，显示一个 div 容器，每个商品显示为一个 div 元素；如果 viewMode 的值既不是 list 也不是 grid，则显示一个错误信息。我们还提供了两个按钮，用于切换显示模式。
ng-switch 的高级用法
ng-switch 指令还有一些高级用法，可以实现更复杂的条件判断。下面是一个例子，用 ng-switch 实现一个动态表格：
-- -------------------- ---- -------
-------
-------
----
--- ----------------- -- ------------------------------
-----
--------
-------
--- -------------- -- ------
--- ---------------------
---- -----------------------------------------
---- ----------------------------------- - ----------------
---- --------------------------------- - -------------------------
---- ------------------------- ----------
-----
-----
--------
--------在这个例子中，我们使用 ng-switch 指令根据行的类型动态地显示不同的内容。当行的类型为 text 时，显示文本内容；当行的类型为 number 时，显示数值内容，并使用 number 过滤器保留两位小数；当行的类型为 date 时，显示日期内容，并使用 date 过滤器将日期格式化为 yyyy-MM-dd 的形式；如果行的类型既不是 text 也不是 number 也不是 date，则显示一个默认的信息。我们还使用 ng-repeat 指令动态地生成表格的内容。
总结
ng-switch 指令是 AngularJS 中一个非常有用的指令，可以根据条件动态地显示不同的内容。在本文中，我们介绍了 ng-switch 的基本用法、与 ng-repeat 的结合使用以及高级用法，希望读者能够掌握 ng-switch 的用法，并在实际项目中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6627aceac9431a720c46017c