我正在尝试使用包含数组内容的输入元素更新页面上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,但出于调试目的,我已将手表留在了。
答案 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。