What is the angularjs way to databind many inputs?

angularjs, javascript

Solution

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>

with a controller of:

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

See this fiddle as an example.

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).

Problem

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.

Original source

Related problems