解决 Angular 在 ng-repeat 中使用 ng-model 后无法实现双向数据绑定的问题-JavaScript中文网-JavaScript教程资源分享门户

在 Angular 中，ng-repeat 是一个非常有用的指令，它可以让我们轻松地在页面中创建重复的元素。同时，ng-model 是实现双向数据绑定的重要指令。然而，在使用 ng-repeat 和 ng-model 结合时，会出现一个常见的问题：无法实现双向数据绑定。本文将详细介绍这个问题，并提供解决方案。

问题表现

首先，我们来看一下这个问题的表现。我们假设有一个数组，里面包含三个对象，每个对象都有 name 和 age 两个属性。我们将这个数组通过 ng-repeat 渲染到页面上，并使用 ng-model 双向绑定其中的 age 属性。代码如下所示：

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

在这个例子中，我们可以在页面上看到三个文本框，分别对应三个对象的 age 属性。如果我们在其中一个文本框中输入一个新的值，然后打印出这个数组，发现输入的值没有被更新。

console.log($scope.people);
// 输出结果：
// [
//   { name: 'Alice', age: 20 },
//   { name: 'Bob', age: 30 },
//   { name: 'Charlie', age: 40 },
// ]

这是因为 ng-repeat 会创建自己的作用域，而 ng-model 默认会绑定到这个作用域中。这就导致了一个问题：在输入框中输入的值只会更新子作用域中的属性值，而不会更新父作用域中的属性值。

解决方案

那么，如何解决这个问题呢？有几种方法可以实现双向数据绑定。下面介绍其中两种比较常见的方法。

使用原型继承

第一种方法是使用原型继承。这种方法利用了 JavaScript 中原型链的特点。具体实现步骤如下：

创建一个 Person 类，包含 name 和 age 两个属性，并在原型上添加一个 setName 方法。（这只是一个示例，如果你已经有了一个类似的类，可以跳过这一步。）

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.setName = function(name) {
  this.name = name;
};

在控制器中创建一个数组，里面包含三个 Person 对象。

$scope.people = [
  new Person('Alice', 20),
  new Person('Bob', 30),
  new Person('Charlie', 40),
];

在 ng-repeat 中绑定一个对象，这个对象的属性值通过原型继承来自 Person 类。

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

在控制器中，将数组中的每个元素都赋值给一个对象，这个对象的属性 data 继承自数组中的元素。

for (var i = 0; i < $scope.people.length; i++) {
  $scope.people[i].data = Object.create($scope.people[i]);
}

这样做的原理是，ng-repeat 中的对象通过 data 属性继承了 Person 类的属性和方法，因此在输入值时，ng-model 实际上是在改变 Person 类中的属性值。这个方法虽然有些繁琐，但是可以解决 ng-repeat 中 ng-model 的双向绑定问题。

使用 $parent 引用父作用域

第二种方法是使用 $parent 引用父作用域。这个方法比较简单，只需要在 ng-model 中使用 $parent 引用父作用域即可。

<div ng-repeat="person in people">
  <input ng-model="$parent.person.age">
</div>

这个方法的原理是，$parent 可以用来引用父作用域中的属性和方法，因此在 ng-model 中使用 $parent.person.age 实际上是在改变父作用域中的 person 对象的 age 属性。这个方法比较方便，但是需要注意不要滥用 $parent，因为它可能会导致作用域链的混乱。

总结

本文介绍了在 ng-repeat 中使用 ng-model 后无法实现双向数据绑定的问题，并提供了两种解决方案：使用原型继承和使用 $parent 引用父作用域。这两种方法各有优缺点，需要根据具体情况来选择。希望本文能对你理解 Angular 的双向数据绑定有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652ba1f97d4982a6ebd6b611