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

时间:2013-01-19 00:27:43

标签: angularjs

我正在尝试使用包含数组内容的输入元素更新页面上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-modelng-change会在文本框中呈现输入值,但是在进行更改时不会修改数组。

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

1 个答案:

答案 0 :(得分: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