Чтобы открыть раскрывающийся список на основе выбора переключателя

Question

Я хочу открыть опцию раскрывающегося списка в зависимости от выбора переключателя. Код Mu находится в AngularJS

Если выбрана Общая компания, то раскрывающийся элемент не должен отображаться. Если демография выбрана, то должен быть показан раскрывающийся элемент.

Мой HTML код:

<div>
<label style =  "position:relative; left:10px; top:20px">Please Choose One:</label>
<div  style = "position: relative; left: 200px; top:-13px">
<input type="radio" checked="" value="OverallCompany" id="optionsRadios1" name="optionsRadios" ng-model="recom.radio" onclick="show();"> OverallCompany
<div>
<input type="radio" checked="" value="Demographics" id="optionsRadios1" name="optionsRadios" ng-model="recom.radio" onclick="show();">Demographics
</div>
</div>
</div>

<div class="form-group">
<label style="position: relative; left:10px; top: 28px">Demographics:</label>
<div style = "position: relative; left:200px">
<select multiple chosen class="chosen-select" id="demo" ng-model="recom.demo" ng-options = "z as z.demographicName for z in demotype" tabindex="4" style = "width:880px;" required >
</select>
</div>
</div>

Я написал функцию в java -скрипте для этого код:

 $scope.show = function()
    {
            if($scope.recom.radio=="OverallCompany"){
                document.getElementById('demo').style.display='none';
            }else if($scope.recom.radio=="Demographics"){
                document.getElementById('demo').style.display='block';
            }
        }

Пожалуйста, помогите, как это сделать.

Спасибо

Answer 1

Функция не нужна. Просто добавьте ng-show вот так:

 <div class="form-group" ng-show="recom.radio == 'Demographics'">
    <label style="position: relative; left:10px; top: 28px">Demographics:</label>
    <div style="position: relative; left:200px">
      <select multiple chosen class="chosen-select" id="demo" ng-model="recom.demo" ng-options="z as z.demographicName for z in demotype" tabindex="4" style="width:880px;" required>
      </select>
    </div>
  </div>

Answer 2

Попробуйте код ниже

<div ng-app="myApp" ng-controller="myCtrl">

    <div>
        <label style="position:relative; left:10px; top:20px">Please Choose One:</label>
        <div style="position: relative; left: 200px; top:-13px">
            <input type="radio" checked="" ng-value="false" id="optionsRadios1" name="optionsRadios"
                ng-model="isDemographics"> OverallCompany
            <div>
                <input type="radio" checked="" ng-value="true" id="optionsRadios1" name="optionsRadios"
                    ng-model="isDemographics">Demographics
            </div>
        </div>
    </div>

    <div class="form-group" ng-show="isDemographics">
        <label style="position: relative; left:10px; top: 28px">Demographics:</label>
        <div style="position: relative; left:200px">
            <select multiple chosen class="chosen-select" id="demo" ng-model="recom.demo"
                ng-options="z as z.demographicName for z in demotype" tabindex="4" style="width:880px;" required>
            </select>
        </div>
    </div>

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
       $scope.isDemographics=true;
    });
</script>

Answer 3

Вы ожидаете параметр в своей функции показа, но в шаблоне вы не передаете его

<input type="radio" checked="" value="OverallCompany" id="optionsRadios1" name="optionsRadios" ng-model="recom.overall" onclick="show(recom.overall);"> OverallCompany

<input type="radio" checked="" value="Demographics" id="optionsRadios1" name="optionsRadios" ng-model="recom.demo" onclick="show(recom.demo);">Demographics

И вы можете легко показать / скрыть, используя ngIf в самом шаблоне, смотрите этот пример https://www.w3schools.com/angular/tryit.asp?filename=try_ng_ng-if