什么是数据绑定多输入angularjs方式吗？ [英] What is the angularjs way to databind many inputs?

问题描述

我学习angularjs，我希望能够让用户输入许多投入。当这些输入进入列表数组元素应该相应地改变。我想用ngRepeat指令来尝试，但我读，因为它创建了一个新的范围，我不能数据绑定：

I'm learning angularjs and I want to be able let the user enter many inputs. When these inputs are entered the list array elements should change accordingly. I wanted to try using ngRepeat directive but I read that since it creates a new scope I cannot databind:

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

我在想，如果我要使用自定义指令，要做到这一点，或不同的方法处理它。

I was wondering if I should be using a custom directive to do this or approach it differently.

推荐答案

您将有更好的运气，如果你的列表是对象数组（而不是一个数组原语）。

You'll have better luck if your list is an array of objects (as opposed to an array of primitives). This works fine even though a new scope is created with 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' } ];
}​

请参阅这个小提琴作为一个例子。

在另一方面，如果你想绑定到字符串数组新的范围将导致一个问题，因为这些值要修改不会被捆绑到原数组字符串基元（如的这个小提琴例子）

On the other hand if you are trying to bind to an array of strings the new scope will cause a problem as the values you are modifying will not be tied to the original array string primitives (as in this fiddle example).

这篇关于什么是数据绑定多输入angularjs方式吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！