AngularJS: заполнить поле выбора на основе двух переключателей

Question

У меня есть 2 радиогруппы с 2 радиокнопками в каждой, возрастная группа (AG1, AG2) и язык («один язык», «многоязычный»). В зависимости от того, какой переключатель выбран, я хочу заполнить поле выбора различными вариантами. Таким образом, есть 4 различные комбинации = 4 различных набора параметров (4 свойства области видимости AngularJS). Я заставил его работать с одной радиогруппой, использующей ng-модель, но я не могу понять, как это сделать с двумя. Я пытался использовать jQuery, но это не сработало, мне сказали, что я не должен смешивать AngularJS и jQuery.

HTML (здесь значение ng явно неверно, я не знаю, что устанавливатьв качестве значения)

<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

$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 + один, он должен отобразить PD1E в поле выбора.

AG2 + один = дисплей PD2E

AG1 + мульти = дисплей PD1M

AG2 + мульти = дисплей PD2M

Answer 1

Один из подходов заключается в использовании директивы ng-if с параметрами:

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