6

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>

15

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

|improve this answer|||||
  • so, does this mean that fruit is a copy and not the actual array element in the OP's syntax ? – gaurav5430 Feb 17 '16 at 17:28
  • @gaurav5430 it's the element of the array but it's assigned in a child scope and since primitives don't have inheritance then yes it could be considered a "copy" – charlietfl Feb 17 '16 at 17:30
  • @gaurav5430 think of it like var a=[1,2,3]; b=a[0];//1 then do b=99 doesn't change array a – charlietfl Feb 17 '16 at 17:39
  • i tried your code, i am not sure why but everytime i type a single letter, the focus is lost from the input and i have to bring focus again for typing another letter. – gaurav5430 Feb 17 '16 at 18:15
  • 1
    @gaurav5430 yes... I forgot to put in track by . try demo link, works fine – charlietfl Feb 17 '16 at 18:17
2

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/

|improve this answer|||||
  • sure if items are objects but for array you don't have to restructure and create objects. The idea behind using dot is to have an object in ng-model but an array is also an object. The whole issue is about prototypal inheritance and array and object literal both have inheritance – charlietfl Feb 17 '16 at 18:02
  • alternate way to look at it is ng-model="fruit['title']" and syntax is the same as using array ... [] is equivalent to dot – charlietfl Feb 17 '16 at 18:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.