input type radio no binding ng-model angularjs

Question

ng-model does not change my radio button, selecting another option print the value in the ng-model does not change my HTML

<div class="btn-group" data-toggle="buttons" role="group">
  <label class="btn btn-outline btn-primary ">
    <input type="radio" name="turno"  ng-model="vm.turno" value="matutino" />
    <i class="icon wb-check text-active" aria-hidden="true"></i>Matutino
  </label>
  <label class="btn btn-outline btn-primary active">
     <input type="radio" ng-model="vm.turno" value="vespertino" />
     <i class="icon wb-check text-active" aria-hidden="true"></i>Vespertino
  </label>
  <label class="btn btn-outline btn-primary">
    <input type="radio" ng-model="vm.turno" value="nocturno" />
    <i class="icon wb-check text-active" aria-hidden="true"></i>Nocturno
 </label>
</div>

<span>{{vm.turno}}</span>

charlietfl · Accepted Answer · 2016-09-30 04:18:41Z

1

You left out name on 2 of the radios. That is what groups them together

answered Sep 30, 2016 at 4:18

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

2 Comments

Rodo Bautista Over a year ago

That is not the problem, it works fine if I remove the data-toggle = "buttons" of the div, known to be overheard.

charlietfl Over a year ago

then create a demo that replicates problem. Not really clear what it is from the description

QI.soa · Accepted Answer · 2016-09-30 04:50:11Z

1

have you set vm = this in your controller?
or maybe you have set the vm.turno to the other type
it works well in my code
plunker

edited Sep 30, 2016 at 4:50

answered Sep 30, 2016 at 4:45

QI.soa

11710 bronze badges

Comments

RIYAJ KHAN · Accepted Answer · 2016-09-30 04:59:08Z

1

vm.turno it is radio button whose default value is

boolean true or false.

These boolean value can not be printable in html.

You can try like this if you want to see the change

{{vm.turno ? "true" : "false"}}

edited Sep 30, 2016 at 4:59

answered Sep 30, 2016 at 4:53

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Comments

Rodo Bautista · Accepted Answer · 2016-09-30 05:13:57Z

Thank you very much for your answers, I was able to resolve the detail was ui.bootstrap use, instead of using a regular radio input, use a label with btn-radio, I remain as follows.

<div class="btn-group">
  <label class="btn btn-outline btn-primary" btn-radio="'matutino'" ng-model="vm.turno">
   <i class="icon wb-check text-active" aria-hidden="true"></i>Matutino
  </label>
  <label class="btn btn-outline btn-primary active" btn-radio="'vespertino'" ng-model="vm.turno">
   <i class="icon wb-check text-active" aria-hidden="true"></i>Vespertino
  </label>
  <label class="btn btn-outline btn-primary" btn-radio="'nocturno'" ng-model="vm.turno">
   <i class="icon wb-check text-active" aria-hidden="true"></i>Nocturno
  </label>
</div>

Collectives™ on Stack Overflow

input type radio no binding ng-model angularjs

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related