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 : stackoverflow.com/questions/27917218/… — Ved
– Ved, Commented Jan 22, 2015 at 19:11
Possible duplicate of Assigning ng-model to checkboxes generated by ng-repeat — Kamal Nayan
– Kamal Nayan, Commented Jun 10, 2019 at 7:19

Wandile · Accepted Answer · 2016-11-29 17:18:23Z

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, 2016 at 17:18

Wandile

1741 silver badge16 bronze badges

answered Jan 22, 2015 at 19:07

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

byrdr Over a year ago

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.

PSL Over a year ago

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

PSL Over a year ago

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

byrdr Over a year ago

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

PSL Over a year ago

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.

|

Collectives™ on Stack Overflow

Angular using $index in ng-model

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related