Question

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

我定义了以下设置对象：

$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-model和ng-change会在文本框中呈现输入值，但是在进行更改时不会修改数组。

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

Answer 1

您的方法存在两个主要问题。第一个是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。

修改在ng-repeat中显示的对象内的数组

1 个答案: