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?

check this for reference : http://stackoverflow.com/questions/27917218/assigning-ng-model-to-checkboxes-generated-by-ng-repeat/27917524#27917524 — Ved, Jan 22 '15 at 19:11
Possible duplicate of [Assigning ng-model to checkboxes generated by ng-repeat](https://stackoverflow.com/questions/27917218/assigning-ng-model-to-checkboxes-generated-by-ng-repeat) — Kamal Nayan, Jun 10 '19 at 07:19

score 15 · Accepted Answer · edited Nov 29 '16 at 17:18

15

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>

edited Nov 29 '16 at 17:18

Wandile

174
1
16

answered Jan 22 '15 at 19:07

PSL

123,204
21
253
243

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. – byrdr Jan 22 '15 at 22:58
Works for me. What version of angular you are using? – PSL Jan 22 '15 at 22:59
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 – PSL Jan 22 '15 at 23:03
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 – byrdr Jan 23 '15 at 00:27
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 – PSL Jan 23 '15 at 00:29
I've put a screenshot in my question of the code that I'm seeing from the snippet after it is run. – byrdr Jan 23 '15 at 00:34
1

are you talking about `value` attribute? if so #1) value attribute in pure html is only for specifying default, #2) just put `` 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_. – PSL Jan 23 '15 at 00:41
. #4) if you really want to update value attribute just place `value="{{interpretation[$index + 1]}}"` as well or `ng-value="interpretation[$index + 1]"` – PSL Jan 23 '15 at 00:44
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. – byrdr Jan 23 '15 at 00:45
@byrdr 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. – PSL Jan 23 '15 at 00:46

Angular using $index in ng-model

1 Answers1