Как связать две или более md-радио-группы для получения результата - PullRequest
Новая
       7

Как связать две или более md-радио-группы для получения результата

0 голосов
/ 09 октября 2018

Я относительно новичок в Angular JS и материалах.

  1. У нас есть требование, когда у отдельных вопросов есть группы переключателей, а также «Согласен-все» / «Не согласен-все».
  2. Всякий раз, когда пользователь нажимает «Согласен-все», отдельные радиокнопки должны превращаться в «Согласен», и тот же случай для «Не согласен-все»
  3. Пользователь имеет возможность выбирать индивидуальноиз списка вопросов.

Как добиться функциональности?

Примечание: мы используем AngularJS. 

<div layout="row">
    <div layout="row">
        <div layout="row">
            <md-radio-group layout="row" >
                <md-radio-button value="AgreeAll">Agree All</md-radio-button>
                <md-radio-button value="DisagreeAll">Disagree All</md-radio-button>
            </md-radio-group>
        </div>
        <div layout="row" class="padding-left-10">
            <span> Do you agree to all the questions?</span>
        </div>
    </div>
</div>
<div layout="row">
    <div layout="row">
        <div layout="row">
            <md-radio-group layout="row" >
                <md-radio-button value="Agree">Agree</md-radio-button>
                <md-radio-button value="Disagree">Disagree</md-radio-button>
            </md-radio-group>
        </div>
        <div layout="row" class="padding-left-10">
            <span> Do you agree to terms and conditions?</span>
        </div>
    </div>
</div>
<div layout="row">
  <div layout="row">
        <div layout="row">
            <md-radio-group layout="row" >
                <md-radio-button value="Agree">Agree</md-radio-button>
                <md-radio-button value="Disagree">Disagree</md-radio-button>
            </md-radio-group>
        </div>
        <div layout="row" class="padding-left-10">
            <span> Do you agree to company policies?</span>
        </div>
    </div>

</div>

1 Ответ

0 голосов
/ 10 октября 2018

Вы поместите ng-модель в каждую радиогруппу, как показано ниже: 

<div layout="row">
    <div layout="row">
        <div layout="row">
            <md-radio-group ng-model="data.agreeAll" layout="row" ng-change="agreeAllorDisagreeAll()">
                <md-radio-button value="AgreeAll">Agree All</md-radio-button>
                <md-radio-button value="DisagreeAll">Disagree All</md-radio-button>
            </md-radio-group>
        </div>
        <div layout="row" class="padding-left-10">
            <span> Do you agree to all the questions?</span>
        </div>
    </div>
</div>
<div layout="row">
    <div layout="row">
        <div layout="row">
            <md-radio-group ng-model="data.group2" layout="row" >
                <md-radio-button value="Agree">Agree</md-radio-button>
                <md-radio-button value="Disagree">Disagree</md-radio-button>
            </md-radio-group>
        </div>
        <div layout="row" class="padding-left-10">
            <span> Do you agree to terms and conditions?</span>
        </div>
    </div>
</div>
<div layout="row">
  <div layout="row">
        <div layout="row">
            <md-radio-group ng-model="data.group3" layout="row" >
                <md-radio-button value="Agree">Agree</md-radio-button>
                <md-radio-button value="Disagree">Disagree</md-radio-button>
            </md-radio-group>
        </div>
        <div layout="row" class="padding-left-10">
            <span> Do you agree to company policies?</span>
        </div>
    </div>

</div>

Затем в вашем контроллере создайте такую ​​функцию: 

$scope.agreeAllOrDisagreeAll = function() { // Please name it something else... this name is terrible :)
    $scope.data.group2 = ($scope.data.agreeAll === 'AgreeAll') ? 'Agreee' : 'Disagree';
    $scope.data.group3 = ($scope.data.agreeAll === 'AgreeAll') ? 'Agreee' : 'Disagree';

}

ТамВероятно, там должна быть другая логика, но это ваше делоЭто даст вам то, что вы хотите!Дайте мне знать, если у вас есть какие-либо другие вопросы или они не сработают ... Может быть, у меня есть опечатка где-нибудь, и я исправлю это!

Удачи!

Редактировать: Я бы также добавил еще одну функцию (или больше логики для первой), чтобы сделать так, чтобы, если они вручную меняют группы 2 или 3, он очищает $scope.data.agreeAll

...