在ng-repeat中实现数组字符串的双向绑定

Question

我有一个字符串数组，我想将每个字符串绑定到一个输入框上。

然而，编辑输入框似乎不能更新数组（可能是隔离作用域的问题）。

有什么建议吗？

function Ctrl($scope) {
  $scope.fruits = ['Apple', 'Mango', 'Banana', 'Strawberry'];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="Ctrl">

    <div style="margin: 20px 0" ng-repeat="fruit in fruits">
      <input type="text" ng-model="fruit" />
    </div>

    Fruits: {{fruits}}

  </div>
</div>

- Daniel

Answer 1

您需要使用$index获取数组引用。但请注意，如果在ng-repeat上进行任何过滤，则此方法将无效，因为索引是基于筛选后的数组而不是原始数组。

<div style="margin: 20px 0" ng-repeat="fruit in fruits track by $index">
      <input type="text" ng-model="fruits[$index]" />
</div>

演示

- charlietfl

---

那么，这是否意味着在 OP 的语法中，fruit 是一个副本而不是实际的数组元素？ - gaurav5430

@gaurav5430 它是数组的元素，但它被分配在子作用域中，由于基元没有继承，所以可以认为它是一个“副本”。 - charlietfl

@gaurav5430 是的……我忘记加上 track by 了。试试演示链接，应该可以正常工作。 - charlietfl

为什么我们需要使用track by？ - gaurav5430

我明白你关于重复的观点，但是对于焦点问题不太理解，有参考资料吗？ - gaurav5430

Answer 2

好的，对我来说似乎是一个关于

'ng-model要求模型名称中有一个点才能与作用域正确配合使用，否则它会创建一个本地作用域'

我建议您将数据结构从普通字符串更改为包含字符串作为属性的对象，例如：

 $scope.fruits = [
    {'title':'Apple'},
    {'title':'Mango'},
    {'title':'Banana'},
    {'title':'Strawberry'},
    ];

现在，当你将它绑定到ng-model上时，像这样:

<div style="margin: 20px 0" ng-repeat="fruit in fruits">
      <input type="text" ng-model="fruit.title" />
</div>

那么它将不会创建任何本地/子范围，而是能够绑定到fruits数组中项目的title属性。

示例fiddle: http://jsfiddle.net/HB7LU/24008/

- gaurav5430

---

如果items是对象，那么你不必重构和创建对象来处理数组。使用“点”符号的想法是在ng-model中拥有一个对象，但数组也是一个对象。整个问题涉及到原型继承，数组和对象字面量都具有继承性。 - charlietfl

另一种看待它的方式是 ng-model="fruit['title']"，语法与使用数组相同... [] 相当于点。 - charlietfl