一尘不染

AngularJS如何绑定多个输入的方法是什么?

angularjs

我正在学习angularjs,我希望能够让用户输入许多输入。输入这些输入后,list数组元素应相应更改。我想尝试使用ngRepeat指令,但我读到它由于创建了一个新作用域而无法进行数据绑定:

<div ng-repeat="item in list">
    <label>Input {{$index+1}}:</label>
    <input ng-model="item" type="text"/>
</div>

我想知道是否应该使用自定义指令来执行此操作或以其他方式处理它。


阅读 209

收藏
2020-07-04

共1个答案

一尘不染

如果您list是对象数组(而不是基元数组),那么会更好。即使使用创建了新作用域,此方法也能正常工作ng-repeat

<div ng-repeat="item in list">
    <label>Input {{$index+1}}:</label>
    <input ng-model="item.value" type="text"/>
</div>

使用以下控制器:

function TestController($scope) {
    $scope.list = [ { value: 'value 1' }, { value: 'value 2' }, { value: 'value 3' } ];
}​

请参阅此小提琴作为示例。

另一方面,如果您尝试绑定到字符串数组,则新作用域将引起问题,因为您要修改的值将不会绑定到原始数​​组字符串基元(如该小提琴示例中所示)。

2020-07-04