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;  
}

但是，如果我想使用Angular Materials 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 according to the docs。您应该使用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 INSIDE包含在md-list-item中。单击该md-list-item中的任意位置后，我的md-checkbox切换为。回想起来，我应该早点注意到赠品的涟漪效应。

md-checkbox指令是在md-list-item内部单击时触发的代理元素之一。将类“md-no-proxy”添加到md-list-item元素会消除此（和涟漪）效果。*

如果你没有使用父md-list-item元素，我建议你查看你的任何父容器/指令是否在其子元素中代理ng-click。

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

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

2 个答案: