CODEWITHSUNDEEP
angularjsangular-material
JoshBerke
JoshBerke

Reputation: 67088

md-checkbox nested inside md-radio-group

I am trying to nest a checkbox inside a radio button group using angular material. I have the checkboxes displaying; however, I am unable to click on the checkboxes. See this code pen

MarkUp

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

JS

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

EDIT Looks like the content inside the radio button is contained within an element with a class of md-label. I'm guessing it's preventing propagation of the click event?

Upvotes: 0

Views: 1040

Answers (2)

JoshBerke
JoshBerke

Reputation: 67088

Since you can't nest them you have to arrange the elements differently. See this code pen for a solution.

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

Upvotes: 0

camden_kid
camden_kid

Reputation: 12813

Does this help? - CodePen

I'm not sure what you are trying to achieve. :-)

Markup

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

Upvotes: 1

Related Questions