在 ng-repeat 中绑定字符串数组的两种方式答案

【问题标题】：Two way binding an array of strings in ng-repeat在 ng-repeat 中绑定字符串数组的两种方式
【发布时间】：2016-05-29 13:04:55
【问题描述】：

我有一个字符串数组，我希望每个字符串都绑定到一个输入。

但是，编辑输入似乎不会更新数组（可能是孤立的范围问题？）。

建议？

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>

【问题讨论】：

标签： javascript arrays angularjs data-binding angularjs-ng-repeat

【解决方案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>

DEMO

【讨论】：

那么，这是否意味着水果是一个副本，而不是 OP 语法中的实际数组元素？
@gaurav5430 它是数组的元素，但它是在子范围内分配的，由于原语没有继承，所以是的，它可以被视为 "copy"跨度>
@gaurav5430 把它想象成var a=[1,2,3]; b=a[0];//1 然后做b=99 不会改变数组a
我试过你的代码，我不知道为什么，但每次我输入一个字母时，输入中的焦点都会丢失，我必须再次输入焦点才能输入另一个字母。
@gaurav5430 是的...我忘了输入 track by 。试试演示链接，效果很好

【解决方案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 属性。

小提琴示例：http://jsfiddle.net/HB7LU/24008/

【讨论】：

确定项目是否是对象，但对于数组，您不必重组和创建对象。使用dot 背后的想法是在ng-model 中有一个对象，但数组也是一个对象。整个问题是关于原型继承和数组和对象字面量都有继承
查看它的另一种方式是ng-model="fruit['title']"，语法与使用数组相同...[]相当于点