如何绑定两个或多个 md-radio-groups 以获得结果

Question

我对 Angular JS 和 material 比较陌生。

我们要求个别问题有单选按钮' 组以及 'Agree-All' / 'Disagree-All'。
每当用户点击 'Agree-All' 时，各个单选按钮应变为 'Agree' 并且 'Disagree-All'
用户有能力从问题列表中单独选择。

如何实现功能？

注意：我们使用的是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>

Answer 1

您将像下面这样将一个 ng-model 放到每个无线电组中：

<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

如何绑定两个或多个 md-radio-groups 以获得结果

How to bind two or more md-radio-groups to derive result

angularjs

angularjs-material