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}}  
</label>
</div>

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

Js代码：

页面显示效果如图：



默认显示的是第二个按钮，要想使第二个默认选中，需要在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的值保持一致，才能获得正确的值。如点击第三个按钮，选中的是第三个对象，如下图：