首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >AngularJS:基于两个单选按钮填充复选框

AngularJS:基于两个单选按钮填充复选框
EN

Stack Overflow用户
提问于 2019-11-07 13:41:58
回答 1查看 38关注 0票数 0

我有两个无线电组,每个有两个单选按钮,年龄组(AG1,AG2)和语言(“一种语言”,“多语种”)。根据选中的单选按钮,我希望使用不同的选项填充复选框。因此,有4个不同的组合=4组不同的选项(4个AngularJS范围属性)。我用ng模型和一个无线电组一起工作,但我想不出怎么用两个。我试过使用jQuery,但它不起作用,有人告诉我,我不应该把AngularJS和jQuery混为一谈。

HTML (ng-值显然是错误的,我不知道将什么设置为值)

代码语言:javascript
运行
复制
<div class="form-check">
   <input class="form-check-input" type="radio" name="AG" id="AG1" ng-model="values" ng-value="PD1E">
   <label class="form-check-label" for="AG1">4 - 5 years</label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="AG" id="AG2" ng-model="values" ng-value="PD2M">
   <label class="form-check-label" for="AG2">6 - 7 years</label>
</div>

<div class="form-check">
   <input class="form-check-input" type="radio" name="language" id="one" ng-model="values" ng-value="PD1E">
   <label class="form-check-label" for="one">one language</label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="language" id="multi" ng-model="values" ng-value="PD1M">
   <label class="form-check-label" for="multi">multilingual</label>
</div>
<br>
<select id="inputPD" class="form-control">
  <option ng-repeat="x in values">{{x}}</option>
</select>

AngularJS作用域属性

代码语言:javascript
运行
复制
$scope.PD1E = [
        "1-one", "0,3", "0,5", "0,8", "1,8", "5,9", "12,8", "32,2", "58,8", "81,6", "100,0"
    ];

$scope.PD2E = [
        "2-one", "0,7", "0,9", "2,0", "7,9", "21,3", "41,5", "100,0"
    ];

$scope.PD1M = [
        "1-multi", "2,1", "3,5", "5,6", "12,5", "19,4", "33,3", "48,6", "61,8", "82,6", "95,8", "100,0"
    ];

$scope.PD2M = [
        "2-multi", "0,5", "2,2", "7,6", "23,8", "49,2", "70,3", "100,0"
    ];

因此,如果我选择AG1 + one,它应该在选中框中显示PD1E

AG2 + one = display PD2E

AG1 + multi = display PD1M

AG2 + multi = display PD2M

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-11-08 02:19:15

一种方法是在选项中使用ng-if指令:

代码语言:javascript
运行
复制
<select id="inputPD" ng-model="selectPD" class="form-control">
  <option ng-repeat="x in PD1E" ng-if="radio1=='1' && radio2=='E'">{{x}}</option>
  <option ng-repeat="x in PD2E" ng-if="radio1=='1' && radio2=='E'">{{x}}</option>
  <option ng-repeat="x in PD1M" ng-if="radio1=='2' && radio2=='M'">{{x}}</option>
  <option ng-repeat="x in PD2M" ng-if="radio1=='2' && radio2=='M'">{{x}}</option>
</select>

只有在条件为<option>时才会添加true元素。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58750031

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档