AngularJS ng-repeat 指令（保姆级教程）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言：AngularJS ng-repeat 指令的核心价值

在前端开发领域，AngularJS 作为早期主流框架之一，其核心特性之一便是数据绑定与指令系统。其中，ng-repeat 指令是开发者高频使用的工具，它能够快速将数组数据渲染为动态列表，大幅降低 DOM 操作的复杂度。对于编程初学者而言，理解 ng-repeat 的基础逻辑与使用场景，是掌握 AngularJS 数据驱动特性的关键一步；而中级开发者则可通过深入学习其高级用法与性能优化技巧，进一步提升代码质量与用户体验。

本文将从基础概念、核心功能、进阶案例到常见问题，逐步展开对 ng-repeat 的系统性讲解。通过结合实际代码示例与形象化比喻，帮助读者构建从“理解原理”到“灵活应用”的完整知识链条。

一、基础概念：ng-repeat 是什么？

1.1 指令的本质：AngularJS 的“指令”是做什么的？

在 AngularJS 中，指令（Directives）是扩展 HTML 的核心机制，它们通过特定的语法（如 ng- 前缀）将 HTML 元素与 JavaScript 逻辑关联。ng-repeat 作为内置指令之一，专门负责遍历数据集合并生成重复的 DOM 结构，其功能类似于 JavaScript 的 for 循环，但通过声明式语法简化了操作。

形象比喻：
可以将 ng-repeat 想象为一台“数据复印机”。当你需要将数组中的每一项（如用户信息、商品列表）展示为多个 HTML 元素时，只需告诉这台“复印机”数据源和输出模板，它就会自动完成重复渲染工作。

1.2 ng-repeat 的基本语法结构

<div ng-repeat="item in items">
  <!-- 每一项的 HTML 模板 -->
  <p>{{ item.name }} - {{ item.price }}</p>
</div>

• item：当前遍历项的临时变量名（可自定义，如 product、user）。
• items：需遍历的数据集合（通常为控制器中的 $scope.items 数组）。
• 作用域：在 ng-repeat 内部，会为每一项创建一个子作用域，继承自父作用域。

二、基础用法：从简单列表到动态排序

2.1 最简示例：渲染用户列表

假设我们有一个包含用户数据的数组：

angular.module('myApp', [])
  .controller('MainCtrl', function($scope) {
    $scope.users = [
      { name: 'Alice', age: 25 },
      { name: 'Bob', age: 30 },
      { name: 'Charlie', age: 28 }
    ];
  });

通过 ng-repeat，可以轻松生成用户卡片列表：

<div ng-controller="MainCtrl">
  <div ng-repeat="user in users" class="user-card">
    <h3>{{ user.name }}</h3>
    <p>Age: {{ user.age }}</p>
  </div>
</div>

运行效果：页面会自动生成 3 个 .user-card 容器，分别展示 Alice、Bob 和 Charlie 的信息。

2.2 添加索引：追踪每一项的位置

若需访问当前项的索引位置，可在语法中引入 $index 变量：

<div ng-repeat="user in users">
  <p>用户 {{ $index + 1 }}: {{ user.name }}</p>
</div>

此时，输出内容会显示“用户 1: Alice”、“用户 2: Bob”等，方便实现序号标记或分页功能。

2.3 动态排序：结合 orderBy 过滤器

ng-repeat 支持与 AngularJS 的过滤器（Filter）结合，实现动态排序或筛选。例如，按年龄倒序排列用户：

<div ng-repeat="user in users | orderBy:'-age'">
  <!-- ... -->
</div>

此处的 -age 表示按 age 字段降序排列，若需升序则去掉负号。

三、进阶技巧：嵌套循环、条件渲染与性能优化

3.1 嵌套 ng-repeat：多维数据的展示

当需要渲染表格或树形结构时，可以嵌套使用 ng-repeat。例如，展示商品分类与子项：

$scope.categories = [
  {
    name: 'Electronics',
    items: ['Phone', 'Laptop', 'Tablet']
  },
  {
    name: 'Books',
    items: ['Novel', 'Tech Book', 'Cookbook']
  }
];

HTML 结构如下：

<div ng-repeat="category in categories">
  <h2>{{ category.name }}</h2>
  <ul>
    <li ng-repeat="item in category.items">{{ item }}</li>
  </ul>
</div>

此示例会生成两个分类块，每个分类下展示对应的子项列表。

3.2 条件渲染：结合 ng-if 或 ng-show

若需根据条件选择性渲染某项，可与 ng-if 或 ng-show 结合。例如，仅显示年龄大于 28 岁的用户：

<div ng-repeat="user in users">
  <div ng-if="user.age > 28">
    <!-- 只有符合条件的用户会被渲染 -->
    <p>{{ user.name }} 是高龄用户</p>
  </div>
</div>

3.3 性能优化：避免重复渲染

当数据量较大时（如 1000+ 条目），直接使用 ng-repeat 可能导致性能问题。此时可通过以下方法优化：

• 使用 track by $index：
  明确指定唯一标识符，减少 AngularJS 的脏检查开销：

  <div ng-repeat="user in users track by $index">
    <!-- ... -->
  </div>
  

• 虚拟滚动（Virtual Scrolling）：
  仅渲染可视区域内的元素，适用于超长列表。可通过第三方库（如 angular-virtual-scroll）实现。

四、常见问题与解决方案

4.1 作用域陷阱：为何子项修改影响父级？

由于 ng-repeat 为每项创建子作用域，直接修改临时变量（如 user）可能意外修改原数组。例如：

<input ng-model="user.name"> <!-- 可能修改原数组中的 name -->

解决方案：
若需避免副作用，可使用 ng-init 或在控制器中设计不可变数据结构。

4.2 如何获取最后一项？

通过 $last 变量判断当前项是否为最后一项：

<div ng-repeat="item in items">
  <span ng-if="$last">这是最后一项</span>
</div>

4.3 与 ng-animate 结合实现过渡效果

通过 AngularJS 的动画模块，可为 ng-repeat 的增删操作添加动画：

<!-- 需引入 angular-animate.js -->
<div ng-repeat="item in items" class="animate-repeat">
  <!-- 内容 -->
</div>

配合 CSS 定义过渡样式：

.animate-repeat {
  transition: all 0.5s ease;
}
.animate-repeat.ng-enter {
  opacity: 0;
  transform: translateY(30px);
}
.animate-repeat.ng-enter.ng-enter-active {
  opacity: 1;
  transform: translateY(0);
}

五、实战案例：构建购物车功能

5.1 需求描述

实现一个简单的购物车页面，包含：

• 商品列表（支持动态添加）
• 总价计算
• 删除单个商品

5.2 完整代码示例

angular.module('shoppingCart', [])
  .controller('CartCtrl', function($scope) {
    $scope.items = [
      { name: 'iPhone', price: 999, quantity: 1 },
      { name: 'Headphones', price: 89, quantity: 2 }
    ];

    $scope.addItem = function() {
      $scope.items.push({ name: 'New Item', price: 0, quantity: 1 });
    };

    $scope.totalPrice = function() {
      return $scope.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
    };
  });

<div ng-controller="CartCtrl">
  <button ng-click="addItem()">添加商品</button>

  <table>
    <tr ng-repeat="item in items track by $index">
      <td>{{ item.name }}</td>
      <td>{{ item.price | currency }}</td>
      <td>
        <input type="number" ng-model="item.quantity" min="1">
      </td>
      <td><button ng-click="items.splice($index, 1)">删除</button></td>
    </tr>
  </table>

  <p>总价：{{ totalPrice() | currency }}</p>
</div>

5.3 功能解析

• 动态增删：通过 addItem 方法和 splice 实现列表的实时更新。
• 总价计算：利用 reduce 方法聚合所有商品的总价。
• track by $index：确保删除操作不会引发不必要的渲染冲突。

结论：ng-repeat 的核心价值与未来方向

通过本文的讲解，我们深入理解了 AngularJS ng-repeat 指令从基础到进阶的使用场景。它不仅是数据驱动视图的核心工具，更通过与过滤器、动画等特性结合，为开发者提供了灵活的解决方案。然而，随着 AngularJS 进入维护阶段，开发者可考虑迁移至 Angular（v2+），其 *ngFor 指令在语法与功能上与 ng-repeat 具有相似性，学习曲线相对平缓。

对于初学者，建议通过实际项目逐步掌握 ng-repeat 的核心用法；中级开发者则可探索其与性能优化、第三方库的集成技巧。记住，掌握一个指令的关键不仅在于“如何写”，更在于“为何这样写”——理解其背后的 AngularJS 作用域机制与数据绑定原理，将帮助你更高效地解决复杂场景中的问题。