Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 820
Daniel Avatar asked Feb 17 '16 17:02

Daniel


2 Answers

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

like image 138
charlietfl Avatar answered Nov 13 '22 20:11

charlietfl


Ok, so it seems to me like a case of

'ng-model requires a dot in the model name to work correctly with the scope, otherwise it would create a local scope'

What i would suggest is to change your data structure from plain strings to objects containing the strings as a property, something like :

 $scope.fruits = [
    {'title':'Apple'},
    {'title':'Mango'},
    {'title':'Banana'},
    {'title':'Strawberry'},
    ];

Now, when you bind it to ng-model like this

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

then it will not create any local/child scope, instead it would be able to bind to the title property on the items in the fruits array.

example fiddle: http://jsfiddle.net/HB7LU/24008/

like image 2
gaurav5430 Avatar answered Nov 13 '22 20:11

gaurav5430