Question

我对Angular JS和材料还比较陌生。

我们有一个要求，即单个问题必须带有单选按钮” 组以及“全部同意” /“全部不同”。
每当用户单击“全部同意”时，单个单选按钮应变为“同意”，而对“全部不同”则使用相同的大小写
用户有能力从问题列表中单独选择。

如何实现功能？

注意：我们正在使用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模型，如下所示：

<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-group以得出结果

1 个答案: