Angular Material的md复选框 - 使用ng-model时所有复选框都会选中。

Question

电台选择作为复选框的样式，效果很好，没有问题：

  <div ng-repeat="choice in regions| orderBy: 'description'">
    <input type="radio"
      value="{{choice.name}}"
      name="regionRadio"
      ng-model="radio.region">
    {{choice.description}}
  </div>
input[type="radio"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox; 
  -ms-appearance: checkbox;  
}

但是，如果我想使用角材料md-checkbox：

  <div ng-repeat="choice in regions| orderBy: 'description'">
    <md-checkbox type="radio"
      value="{{choice.name}}"
      ng-model="radio.region">
    {{choice.description}}
    </md-checkbox>
  </div>

它不能很好地处理ng-model。当只选择一个复选框时，所有复选框都将被选中（已选中）。

有什么建议如何使md-checkbox与ng-model与以前相同的方式工作？

Answer 1

您的问题有些混乱。根据文档，md-checkbox没有属性type。您应该真正使用md-radio-group来保持AM最佳实践。

我创建了一个用md-checkbox和md-radio-group -Codepen

创建了一个示例

单击复选框并未选择所有复选框，但您可以选择多个复选框。编写一些代码以使复选框的作用非常容易。

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <p>Checkbox</p>
  <div ng-repeat="choice in regions| orderBy: 'description'">
    <md-checkbox type="radio"
                 value="{{choice.name}}"
                 ng-model="radio.region">
      {{choice.description}}
    </md-checkbox>
  </div>
  <p>{{radio.region}}</p>
  <p>Radio Group</p>
  <md-radio-group ng-model="newradio.region">
    <md-radio-button ng-repeat="choice in regions| orderBy: 'description'" value="{{choice.name}}" class="md-primary">{{choice.description}}</md-radio-button>
  </md-radio-group>
  <p>{{newradio.region}}</p>
</div>

JS

angular.module('MyApp',['ngMaterial'])
.controller('AppCtrl', function($scope) {
  $scope.regions = [
    {name: "sky", description: "The sky"},
    {name: "sea", description: "The sea"},
    {name: "land", description: "The land"},
    {name: "water", description: "The water"}
  ];
});

Answer 2

我会在黑暗中拍摄，并假设您与我有相同的（或非常相似的）问题。我被惊呆了搜索并发现这个问题对您和我都是独一无二的，直到我开始研究父母的容器并意识到我的错误为止。

我的问题是，我将我的MD-Checkbox包括在MD列表中。单击该MD列表项目中的任何地方时，我的MD-Checkbox切换了。回想起来，我应该早日注意到赠品的连锁反应。

MD-Checkbox指令是在MD-List-ITEM内部单击时会触发的代理元素之一。将类" md-no-proxy"添加到md-list-Inem元素中删除此（和连锁）效果。*

如果您不使用父级列表元素，我建议您研究是否有任何父母的容器/指令代理其子女元素中的ng-click。

*来源：https://material.angularjs.org/latest/api/directive/mdlistitem