Angular using $index in ng-model

Question

I have the following loop in which I'm trying to increment several fields based on the array index each time through the loop.

<div class="individualwrapper" ng-repeat="n in [] | range:4">
  <div class="iconimage"></div>
  <div class="icontext">
    <p>Imagine that you are in a health care facility.</p> 
    <p>Exactly what do you think this symbol means?</p>
    <textarea type="text" name="interpretation_1" ng-model="interpretation_1" ng-required="true"></textarea>
    <p>What action you would take in response to this symbol?</p>
    <textarea type="text" name="action_1" ng-model="action_1" ng-required="true"></textarea>  
  </div>
</div>

I'd like to do something similar to this"

ng-model="interpretation_{{$index + 1}}"

Angular is not rendering that value though? What would be the best way to go about adding this kind of logic in the mg-model field?

Ascanius

check this for reference : #27917718 – Normative

Possible duplicate of Assigning ng-model to checkboxes generated by ng-repeat – Jaeger

Answer 1

It becomes an invalid expression with the usage of interpolation with ng-model expression. You need to provide a property name there. Instead you can use an object and use bracket notation.

i.e in your controller:

$scope.interpretation = {};

and in your view use it as:

ng-model="interpretation[$index + 1]"

Demo

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.interpretation = {};
  $scope.actions = {};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  {{interpretation}} {{actions}}
  <div class="individualwrapper" ng-repeat="n in [1,2,3,4]">
    <div class="iconimage">
    </div>
    <div class="icontext">
      <p>Imagine that you are in a health care facility.</p>
      <p>Exactly what do you think this symbol means?</p>
      <textarea type="text" ng-attr-name="interpretation{{$index + 1}}" ng-model="interpretation[$index+1]" ng-required="true"></textarea>
      <p>What action you would take in response to this symbol?</p>
      <textarea type="text" name="action{{$index + 1}}" ng-model="actions[$index+1]" ng-required="true"></textarea>
    </div>
  </div>
</div>

Wenona

I can't seem to get the bracket notation to be parsed into the value. ng-model="interpretation[$index + 1]" is rendered in the html as well as other scope values I've tried. – Ascanius

Works for me. What version of angular you are using? – Wenona

See the demo inline edited into the answer. and well you need to define the object before hand in your controller so that you don tkeep updating the property on the child scope – Wenona

It still doesn't seem to work. The snippet code in chrome inspector is still showing the un-interpolated {{}} notation. I'm using angular 1.3 – Ascanius

I don't understand ur issue. Ng-model clearly gets updated. See the interpolation in the beginning. What are u saying. Can u explain more – Wenona

I've put a screenshot in my question of the code that I'm seeing from the snippet after it is run. – Ascanius

are you talking about value attribute? if so #1) value attribute in pure html is only for specifying default, #2) just put <textarea></textarea> and type in and see inspect you wont see an value or anything. it is the value property that gets updated not the attribute #3) When using angular you dont worry about DOM you only worry about ng-model and your view model bindings, let angular manage DOM however it needs to, isn't it the point of doing angular way. – Wenona

. #4) if you really want to update value attribute just place value="{{interpretation[$index + 1]}}" as well or ng-value="interpretation[$index + 1]" – Wenona

Thank you, sorry I was confused. I see how it's working now. I was imagining the bracket notation would get resolved in the html. I appreciate the explanation. – Ascanius

@Ascanius You are welcome :), You need bracket notation regardless, otherwise with nterpolation inside the ng-model will result in parse error. You can see your console with the original code. – Wenona