2

我正在尝试ng-repeat使用包含数组内容的输入元素更新显示在页面上的 $scope 对象的数组。可以在此处找到 plunker 示例：Plunker 演示（基本，我的问题的精简示例）

我定义了以下设置对象：

$scope.settings = {
  list: ['list item one', 'list item two', 'list item three']
};

我代表页面上的数据，如下所示：

<ul> 
  <li ng-repeat="item in settings.list">
    <input type="text" 
           value="{{item}}" 
           ng-model="singleItem"
           ng-change="settings.list[$index] = singleItem" />
    <a href="javascript:void(0)">delete</a>
  </li>
</ul>

我的目标是最初<input>用内容填充字段，$scope.settings.list并且每当更改项目时更新数组，但我还没有弄清楚如何在视图中。在输入中省略ng-modelandng-change会正确呈现文本框中的输入值，但是在进行更改时不会修改数组。

旁注：在 Plunker 示例中，我有$watch设置对象。在我的实际代码中，这用于使用$cookies模块更新“设置 cookie” 。示例中省略了 Cookie，但出于调试目的，我将手表留在了里面。

4

1 回答 1

7

您的方法有两个主要问题。首先是 ngRepeat 使用继承范围，因此原始值（如字符串和数字）不能很好地发挥作用。您应该将对象数组传递给 ngRepeat 而不是基元数组。您的第二个问题是绑定到输入的过于复杂的方式。您只需要这样做：

$scope.settings = {
  list: [
    { val: 'list item one'},
    { val: 'list item two'},
    { val: 'list item three'}
  ]
};

然后在你看来：

<ul> 
  <li ng-repeat="item in settings.list">
    <input type="text" ng-model="item.val"></input>
    <a ng-click="remove($index)">delete</a>
  </li>
</ul>

这是修改后的 plunker：http ://plnkr.co/edit/ZGFjBnVSwM4hNSgVSOCW?p=preview 。

于 2013-01-19T00:44:57.250 回答