AngularJS 在嵌套的 ng-repeat 指令中使用 ng-model

在本文中，我们将介绍如何在嵌套的 ng-repeat 指令中正确使用 ng-model。AngularJS 是一个流行的前端框架，它提供了一种声明式的方法来开发动态的 Web 应用程序。

什么是 ng-model？

在介绍如何在嵌套的 ng-repeat 指令中使用 ng-model 之前，我们先来了解一下 ng-model 的概念。

ng-model 是 AngularJS 提供的一个指令，用于绑定数据到表单元素或其他 HTML 元素上。当用户与表单元素交互时，ng-model将收集用户输入的数据并将其与实际数据模型进行双向绑定。

在 ng-repeat 中使用 ng-model

通常，在ng-repeat 指令内部使用 ng-model 非常简单，我们只需要把 ng-model 指令添加到需要绑定数据的表单元素上即可。然而，在嵌套的 ng-repeat 指令中使用 ng-model 可能会导致一些问题。

让我们通过一个例子来说明这个问题。假设我们有一个数组，其中包含多个对象，每个对象都有一个名字和一个年龄属性。我们希望在一个表单中显示这些对象，并能够编辑它们。我们可以使用 ng-repeat 指令遍历数组，并在每个对象上使用 ng-model 绑定输入框。

<div ng-repeat="person in people">
  <input type="text" ng-model="person.name">
  <input type="text" ng-model="person.age">
</div>

这段代码看起来没什么问题，但实际上，当我们尝试在输入框中编辑对象的名称时，会发现所有输入框都会同时更新。这是因为嵌套的 ng-repeat 指令会创建新的作用域，而每个输入框的 ng-model 实际上都绑定到了同一个父作用域的属性上。

为了解决这个问题，我们需要在 ng-model 表达式中指定对象的唯一标识符。通过给每个输入框提供一个独特的标识符，我们可以确保每个输入框都会与正确的对象属性进行双向绑定。

我们可以使用 $index 变量来生成一个唯一的标识符。$ index 变量是 ng-repeat 内部可用的一个特殊变量，代表当前迭代的索引。我们可以通过将 $index 变量添加到 ng-model 表达式中来为每个输入框提供一个唯一的标识符。

<div ng-repeat="person in people">
  <input type="text" ng-model="people[ $index].name"> <input type="text" ng-model="people[$ index].age">
</div>

现在，每个输入框都与正确的对象属性进行绑定，我们可以独立地编辑每个对象的名称和年龄。

示例

让我们用一个更复杂的示例来展示如何在嵌套的 ng-repeat 指令中正确使用 ng-model。

假设我们有一个学校的班级列表，每个班级中都有多名学生，每个学生都有一个姓名和一个成绩属性。我们希望能够显示每个班级的学生列表，并能够编辑每个学生的姓名和成绩。

我们可以使用嵌套的 ng-repeat 指令来实现这个功能。首先，我们需要一个包含班级的数组，以及每个班级的学生列表。

在控制器中：

$scope.classes = [
  {
    name: "Math",
    students: [
      { name: "John", score: 90 },
      { name: "Lisa", score: 80 },
      { name: "Mike", score: 95 }
    ]
  },
  {
    name: "English",
    students: [
      { name: "Tom", score: 85 },
      { name: "Sarah", score: 92 },
      { name: "Emma", score: 88 }
    ]
  }
];

然后，在模板中，我们使用两个嵌套的 ng-repeat 指令来显示班级和学生列表，并使用 ng-model 绑定输入框到学生的姓名和成绩属性。我们也为每个输入框提供了一个唯一的标识符来确保正确的绑定。

<div ng-repeat="class in classes">
  <h3>{{ class.name }}</h3>
  <div ng-repeat="student in class.students">
    <input type="text" ng-model="class.students[ $index].name"> <input type="text" ng-model="class.students[$ index].score">
  </div>
</div>

现在，我们可以在页面上看到每个班级的学生列表，并且可以独立地编辑每个学生的姓名和成绩。当我们在输入框中输入内容时，相应的数据模型也会相应更新。