Question

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.

Answer 1

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