javascriptarraysangularjsdata-bindingangularjs-ng-repeat

Two way binding an array of strings in ng-repeat


I have an array of strings, and I want each of the strings to be bound to an input.

However, editing the input doesn't seem to update the array (isolated scope issues maybe?).

Suggestions?

function Ctrl($scope) {
  $scope.fruits = ['Apple', 'Mango', 'Banana', 'Strawberry'];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="Ctrl">

    <div style="margin: 20px 0" ng-repeat="fruit in fruits">
      <input type="text" ng-model="fruit" />
    </div>

    Fruits: {{fruits}}

  </div>
</div>


Solution

  • You need the array reference which you can get from $index. Note, however, that this won't work if any filtering is done on the ng-repeat, as the indexing then is based on the filtered array, not the original.

    <div style="margin: 20px 0" ng-repeat="fruit in fruits track by $index">
          <input type="text" ng-model="fruits[$index]" />
    </div>
    

    DEMO