current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 3 down vote favorite
1

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?

share|improve this question
    
check this for reference : stackoverflow.com/questions/27917218/… – Ved Jan 22 '15 at 19:11
up vote 7 down vote accepted

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>

share|improve this answer
    
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 0:27
1  
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. – PSL Jan 23 '15 at 0:41

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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