Angularjs中单选按钮用法总结

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

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

Angularjs中单选按钮用法总结

猜你在找的Angularjs相关文章