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 中的指令有所帮助。下面是完整的示例代码：
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="item in items">{{ item.name }}</div>
<div ng-repeat="department in company.departments">
<h2>{{ department.name }}</h2>
<ul>
<li ng-repeat="employee in department.employees">{{ employee.name }}</li>
</ul>
</div>
<div ng-repeat="employee in employees | filter:{ age: '>30' }">{{ employee.name }}</div>
<div ng-show="showMessage">Hello, world!</div>
<div ng-hide="hideMessage">Hello, world!</div>
<div ng-if="showMessage">Hello, world!</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.items = [{ name: "item1" }, { name: "item2" }, { name: "item3" }];
$scope.company = {
name: "ABC Company",
departments: [
{
name: "Department A",
employees: [{ name: "Employee A1" }, { name: "Employee A2" }]
},
{
name: "Department B",
employees: [{ name: "Employee B1" }, { name: "Employee B2" }]
}
]
};
$scope.employees = [
{ name: "Employee 1", age: 25 },
{ name: "Employee 2", age: 35 },
{ name: "Employee 3", age: 45 }
];
$scope.showMessage = true;
$scope.hideMessage = false;
});
</script>来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6589c6fdeb4cecbf2df164aa