Question

ng-model不会改变我的单选按钮，选择另一个选项打印ng-model中的值不会改变我的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>

Answer 1

你在2台无线电上遗漏了name。这就是将他们聚集在一起的原因

Answer 2

您是否在控制器中设置了vm = this？
或者您可能已将vm.turno设置为其他类型它在我的代码中运作良好 plunker

Answer 3

vm.turno它是单选按钮，其默认值为

boolean true or false.

这些布尔值无法在html中打印。

如果您想查看更改

，可以尝试这样做

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

Answer 4

非常感谢您的回答，我能够解决详细信息是ui.bootstrap使用，而不是使用常规的无线电输入，使用带有btn-radio的标签，我保持如下。

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

输入类型无线电无绑定ng-model angularjs

4 个答案: