AngularJS中md-checkbox单选功能实现问题求助

我懂你这种需求——喜欢md-checkbox的样式，但需要实现单选效果，不想用md-radio-button对吧？其实不用纠结，只要统一管理选中状态就能搞定，下面是具体的实现方案：

1. 先在控制器里定义统一的选中变量 #

别给每个checkbox单独绑定不同的ng-model了，我们用一个变量来存当前选中的选项值，比如selectedShift：

angular.module('myApp', ['ngMaterial'])
.controller('MyController', function($scope) {
  // 可选：初始化时默认选中某一项，比如默认选中Full Time就设为'fulltime'，为空则不选中
  $scope.selectedShift = '';
});

2. 修改你的HTML代码 #

把每个md-checkbox的选中状态绑定到“当前选项是否等于选中变量”的判断，同时用ng-click来更新这个变量：

<div ng-controller="MyController">
  <ul>
    <li>
      <md-checkbox 
        ng-model="selectedShift === 'fulltime'" 
        ng-click="selectedShift = selectedShift === 'fulltime' ? '' : 'fulltime'"
        aria-label="Full Time">
        Full Time
      </md-checkbox>
    </li>
    <li>
      <md-checkbox 
        ng-model="selectedShift === 'morning'" 
        ng-click="selectedShift = selectedShift === 'morning' ? '' : 'morning'"
        aria-label="6AM - 12 PM">
        6AM - 12 PM
      </md-checkbox>
    </li>
    <!-- 后续要加更多选项的话，只要给每个选项分配唯一的值就行 -->
  </ul>
</div>

逻辑说明： #

• ng-model="selectedShift === 'fulltime'"：这个表达式会自动判断当前checkbox是否该选中——当selectedShift的值是fulltime时，这个checkbox就会被勾选，其他的因为判断不成立会自动取消勾选。
• ng-click里的代码：如果当前checkbox已经是选中状态（也就是selectedShift等于当前选项的值），就清空选中状态；否则就把selectedShift设为当前选项的值，实现单选切换。

可选：强制必须选一项（和radio完全一样） #

如果你希望和单选按钮一样，不能取消选中（必须保持一个选项被勾选），那把ng-click的逻辑改一下，去掉清空的分支就行：

<md-checkbox 
  ng-model="selectedShift === 'fulltime'" 
  ng-click="selectedShift = 'fulltime'"
  aria-label="Full Time">
  Full Time
</md-checkbox>

这样不管点多少次，只要点这个checkbox，就会把它设为选中状态，其他的自动取消，完全模拟radio的行为。

小提醒： #

• 确保你的AngularJS和Angular Material版本兼容，避免指令不生效的问题。
• 每个选项的标识值（比如'fulltime'、'morning'）要唯一，这样才能正确区分不同的选项。

内容的提问来源于stack exchange，提问作者Santhosh