AngularJS 是一种流行的前端框架，它提供了许多指令来帮助我们快速构建动态 Web 应用程序。在本文中，我们将重点介绍 AngularJS 中的 ng-repeat 和 ng-show 指令，它们是我们在日常开发中经常使用的指令。
ng-repeat 指令
ng-repeat 指令用于在 HTML 中重复一个元素或一组元素，通常用于循环渲染列表数据。它的基本语法如下：
<div ng-repeat="item in items">{{ item.name }}</div>其中，items 是一个数组，item 是数组中的每个元素。我们可以在 ng-repeat 中使用 item 对象来访问每个元素的属性值。
嵌套 ng-repeat
ng-repeat 还支持嵌套使用，例如，我们有一个包含多个部门的公司对象，每个部门又包含多个员工，我们可以使用嵌套的 ng-repeat 来渲染这些数据：
<div ng-repeat="department in company.departments">
<h2>{{ department.name }}</h2>
<ul>
<li ng-repeat="employee in department.employees">{{ employee.name }}</li>
</ul>
</div>过滤器
ng-repeat 还支持过滤器，我们可以使用过滤器来过滤数组中的元素。例如，我们可以使用 filter 过滤器来过滤出年龄大于 30 岁的员工：
<div ng-repeat="employee in employees | filter:{ age: '>30' }">{{ employee.name }}</div>ng-show 指令
ng-show 指令用于根据表达式的值来显示或隐藏一个元素。它的基本语法如下：
<div ng-show="showMessage">Hello, world!</div>
当 showMessage 的值为 true 时，该元素会被显示出来，否则元素会被隐藏。
ng-hide 指令
ng-hide 指令与 ng-show 相反，它会根据表达式的值来隐藏或显示一个元素。它的基本语法如下：
<div ng-hide="hideMessage">Hello, world!</div>
当 hideMessage 的值为 true 时，该元素会被隐藏，否则元素会被显示出来。
ng-if 指令
ng-if 指令用于根据表达式的值来创建或销毁一个元素。与 ng-show 和 ng-hide 不同，ng-if 在元素被销毁时会从 DOM 中删除该元素及其子元素。它的基本语法如下：
<div ng-if="showMessage">Hello, world!</div>
当 showMessage 的值为 true 时，该元素会被创建，否则元素会被销毁。
总结
在本文中，我们介绍了 AngularJS 中的 ng-repeat 和 ng-show 指令，它们是我们在日常开发中经常使用的指令。我们学习了它们的基本语法、嵌套使用、过滤器以及 ng-hide 和 ng-if 指令。希望本文能够对你了解 AngularJS 中的指令有所帮助。下面是完整的示例代码：
-- -------------------- ---- -------
---- -------------- -----------------------
---- --------------- -- --------- --------- --------
---- --------------------- -- ---------------------
------ --------------- -------
----
--- ------------------- -- ------------------------ ------------- -------
-----
------
---- ------------------- -- --------- - -------- ---- ----- ----- ------------- --------
---- ---------------------------- ------------
---- ---------------------------- ------------
---- -------------------------- ------------
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
------------ - -- ----- ------- -- - ----- ------- -- - ----- ------- ---
-------------- - -
----- ---- ---------
------------ -
-
----- ----------- ---
---------- -- ----- --------- --- -- - ----- --------- --- --
--
-
----- ----------- ---
---------- -- ----- --------- --- -- - ----- --------- --- --
-
-
--
---------------- - -
- ----- --------- --- ---- -- --
- ----- --------- --- ---- -- --
- ----- --------- --- ---- -- -
--
------------------ - -----
------------------ - ------
---
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6589c6fdeb4cecbf2df164aa