Rodo Bautista
Rodo Bautista

Reputation: 71

input type radio no binding ng-model angularjs

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>

Upvotes: 0

Views: 121

Answers (4)

Rodo Bautista
Rodo Bautista

Reputation: 71

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>

Upvotes: 1

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

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"}}

Upvotes: 1

QI.soa
QI.soa

Reputation: 117

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

Upvotes: 1

charlietfl
charlietfl

Reputation: 171669

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

Upvotes: 1

Related Questions