md-checkbox 嵌套在 md-radio-group 中答案

【问题标题】：md-checkbox nested inside md-radio-groupmd-checkbox 嵌套在 md-radio-group 中
【发布时间】：2016-10-18 16:45:35
【问题描述】：

我正在尝试使用角度材料在单选按钮组内嵌套一个复选框。我有复选框显示；但是，我无法单击复选框。看到这个code pen

标记

<md-radio-group ng-model="vm.TargetType">
    <md-radio-button class="" ng-repeat="targetGroup in vm.Targets" ng-value="targetGroup.Id">{{targetGroup.Name}}<br />
      <div ng-if="targetGroup.Id == 1">
        <div ng-repeat="p in vm.Phases">

          <md-checkbox ng-checked="vm.exists(p,vm.SelectedPhases)" ng-click="vm.toggle(p,vm.SelectedPhases)">{{p.Name}}</md-checkbox>
        </div>
      </div>
    </md-radio-button>
  </md-radio-group>

(function() {
  'use strict';

  angular.module("myApp", ['ngMaterial']).controller("myController", 

  function ($scope) {
    var vm=this;
    vm.SelectedPhases=[];
    console.log('in my controller')
    vm.Targets = [{
      Id: 1,
      Name: 'Can\'t select child elements'
    }, {
      Id: 2,
      Name: 'Another Group'
    }];

    vm.Phases = [{
      Id: 1,
      Name: 'Something A'
    }, {
      Id: 2,
      Name: 'Something B'
    }];
    
     vm.toggle = function (item, list) {
            var idx = list.indexOf(item);
            if(idx > -1)
            {
                list.splice(idx, 1);
            }
            else
            {
                list.push(item);
            }
        };

        vm.exists = function (item, list) {
            return list.indexOf(item) > -1;
        };
  });
})();

编辑看起来单选按钮内的内容包含在具有 md-label 类的元素中。我猜它阻止了点击事件的传播？

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

这有帮助吗？ - CodePen

我不确定您要达到的目标。 :-)

标记

<div layout="row" layout-align="start center"  ng-repeat="targetGroup in vm.Targets">
    <md-radio-group ng-model="vm.TargetType">
      <md-radio-button class="" ng-value="targetGroup.Id">{{targetGroup.Name}}<br />
      </md-radio-button>
    </md-radio-group>
    <div ng-if="targetGroup.Id === 1">
      <div ng-repeat="p in vm.Phases">
        <md-checkbox ng-checked="vm.exists(p,vm.SelectedPhases)" ng-click="vm.toggle(p,vm.SelectedPhases)">{{p.Name}}</md-checkbox>
      </div>
    </div>
</div>

【讨论】：

不完全是，我希望复选框位于单选按钮下方。所以用户有两个不同的选项（TargetGroup），如果他们选择目标组 1，那么他们还有其他可以选择的选项。
刚刚更新了我的代码笔，显示了如果未选择第一个收音机，我将如何禁用复选框。

【解决方案2】：

由于您不能嵌套它们，因此您必须以不同的方式排列元素。请参阅此code pen 以获得解决方案。

<div class='row'>
  <md-radio-group ng-model="vm.TargetType">
    <div ng-repeat="targetGroup in vm.Targets">

      <md-radio-button class="" ng-value="targetGroup.Id">
        {{targetGroup.Name}}<br />
      </md-radio-button>

      <div class="row" style="margin-left:50px;" ng-repeat="phase in vm.Phases" ng-if="targetGroup.Id == 1">
        <md-checkbox ng-disabled="vm.TargetType!=1" checked="vm.exists(p,vm.SelectedPhases)" ng-click="vm.toggle(p,vm.SelectedPhases)">{{phase.Name}}</md-checkbox>

      </div>
  </md-radio-group>

  </div>

【讨论】：