ng-class within ng-repeat having dynamic ng-model

Question

I am iterating over a array of strings with ng-repeat

<div ng-repeat="i in mdsecuritysensorswsize">

in there I have a required select with a 'dynamic model'

ng-model="valueBag[i+'sizes']"

now I want to add a has-error class, if the select is empty (apply bootsrap3 error style)

ng-class="{'has-error': myForm.valueBag[i+'sizes'].$invalid, 'has-success': !myForm.valueBag[i+'sizes'].$invalid}"

But this doesn't seem to work with such a dynamic ng-model name.

Here is the complete code:

<div ng-repeat="i in mdsecuritysensorswsize">
  <div class="form-group">
    <div class="col-md-2"
         ng-class="{'has-error': myForm.valueBag[i+'sizes'].$invalid, 'has-success': !myForm.valueBag[i+'sizes'].$invalid}"
         >
      <select class="form-control" required
          ng-options="resText[j] for j in mdsecuritysensorswsizesizes2"
          ng-model="valueBag[i+'sizes']"></select>
     </div>
   </div>
</div>

Am I missing something here?

try using $index instead of i to access you array elements, have a look at this answer — ms87
– ms87, Commented Feb 3, 2014 at 8:37
if you create your form inputs dynamically, it will be a problem with this code when you try to access myForm.valueBag[i+'sizes'].$invalid If you create form inputs dynamically, check out my directive to solve this problem here: stackoverflow.com/questions/21455695/… — Khanh TO
– Khanh TO, Commented Feb 3, 2014 at 10:04

Community · Accepted Answer · 2017-05-23 11:47:02Z

2

this from the comments did the job:

if you create your form inputs dynamically, it will be a problem with this code when you try to access myForm.valueBag[i+'sizes'].$invalid If you create form inputs dynamically, check out my directive to solve this problem here: stackoverflow.com/questions/21455695/… – Khanh TO Feb 3 at 10:04

AngularJS dynamic form field validation

THX @Khanh TO

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Feb 14, 2014 at 17:04

Daniel Kreiseder

12.5k9 gold badges42 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

ng-class within ng-repeat having dynamic ng-model

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related