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的值保持一致，才能获得正确的值。如点击第三个按钮，选中的是第三个对象，如下图：