Блог

Главная - Вопросы по программированию - md-флажок, вложенный в md-radio-group

md-флажок, вложенный в md-radio-group

#angularjs #angular-material

#angularjs #angular-материал

Вопрос:

Я пытаюсь вставить флажок внутри группы переключателей, используя угловой материал. У меня отображаются флажки; однако я не могу щелкнуть по флажкам. Посмотрите на это кодовое перо

Разметка

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

Редактировать
Похоже, что содержимое внутри переключателя содержится в элементе с классом md-label. Я предполагаю, что это предотвращает распространение события click?

Ответ №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>

Комментарии:

1. Не совсем, я хочу, чтобы флажки были под переключателем. Таким образом, у пользователя есть два разных параметра (TargetGroup), если они выбирают targetgroup 1, то у них есть дополнительные параметры, которые они могут выбрать.

2. Только что обновил мой codepen, показывающий, как я буду отключать флажки, если первое радио не выбрано.

Ответ №2:

Поскольку вы не можете вложить их, вам нужно расположить элементы по-другому. Смотрите это кодовое перо для решения.

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