Angularjs中单选按钮用法总结

单选按钮，比较常用，但是，使用时，总会出现一些问题，比如点击时，获得不了对应的值，或者单选按钮在页面加载时，不能默认显示所要选择的项等一系列问题。下面总结一下：

Html页面：

<div class="btn-group">
  <label ng-repeat="value in vm.values">
    <input type="radio" name="myTestRadio" ng-model="vm.selection" ng-value="value"
           ng-checked="vm.selection.code == value.code"/>编号：{{value.code}}，年龄：{{value.age}}&nbsp;&nbsp;
  </label>
</div>

<div>
  您选中的是：{{vm.selection}}
</div>

Js代码：

'use strict' ;   angular.module( 'ngShowcaseApp' ).controller( 'ctrl.input.radio' ,  function  ($scope) {    var  vm = $scope.vm = {};    vm.values = [      {code:  'a' , age: 30},      {code:  'b' , age: 50},      {code:  'c' , age: 44}    ];    vm.selection = vm.values[1];    //默认显示第二个 });

页面显示效果如图：

默认显示的是第二个按钮，要想使第二个默认选中，需要在Js代码中设置默认项：

vm.selection = vm.values[1];

这里的vm.selection 是radio的ng-model的值，每次点击单选按钮，它对应的值是value，也就是ng-value的值，这里设置的是ng-value=“value”，在本例中，"value"是一个对象，所以，vm.selection也是对象，该对象来自数组

vm.values。

每次点击不同的单选按钮，就会更换一个对象，只有ng-modle的值设置的与单选按钮的ng-value的值保持一致，才能获得正确的值。如点击第三个按钮，选中的是第三个对象，如下图：