initialize dropdown values based on radio button cha

Question

$scope.identityProof = ["karnataka","Tamilnadu","Andhra","Delhi","Kerala","Bihar"]

<form id="myForm">
  <input type="radio" name="myRadio" value="Yes" /> Yes <br />
  <input type="radio" name="myRadio" value="No" /> No <br />
</form>


<div ng-app="myApp">
  <div ng-controller="AppCtrl">
    {{message}} <br />

    <!--Options value is defualt 0, 1 ... and it's non change able -->
    <span>Default Otions:</span>
   <select id="idType" name="idProff" ng-model="completiondetail.IDProofType" ng-options="item.proofName as item.proofName for item in identityProof">
                      <option value="">--Choose a Document--</option>
                </select>


  </div>
</div>

I have two radio bottons "Yes" and "No". Dropdown values are coming from service response. So I'm displaying the values as it is.

1) When the page will load, that time dropdown will show "--Cjoose a Document -- " for first time.

2) If I will select the dropdown value as "Yes", I don't want to do anything and it should work asusual.

3) Incased if I will select the dropdown value as "No", I want to set "Delhi" in Dropdown. It should visible in a dropsown.

Gowthaman · Accepted Answer · 2018-03-16 18:22:40Z

1

Your radio button should also be inside <div ng-controller="..."> tag for angular to recognize the change in value. Then you can use ng-change to achieve what you want.

 <select ng-model="selectedVal" ng-options="b for b in identityProof track by b"></select>
<input type="radio" name="radio_select" value="yes" ng-model="selectedRadio"/>Yes
<input type="radio" name="radio_select" value="no" ng-model="selectedRadio" ng-change="selectedVal='Delhi'" />No

Here is the jsfiddle link. Hope this helps!

answered Mar 16, 2018 at 18:22

Gowthaman

1,3021 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sathish kumar Over a year ago

In dropdown, by default the value is "TamilNadu". If I change yes it should change as "Delhi". Again If I select No , it should show the existing value same as "Tamilnadu". Can you please tell this. Its not updating again.

Gowthaman Over a year ago

You have to set the ng-model of dropdown to Tamilnadu and add ng-change which will set dropdown to Tamilnadu when user selects Yes. i would recommend you to read more on ng-change and try some examples. This link might give you a head start learnkode.com/Examples/Angular/Ng-Change

lin · Accepted Answer · 2018-03-16 18:31:51Z

It's an easy ng-change logic what you are looking for:

View

<div ng-controller="MyCtrl">
  <input type="radio" 
         name="myRadio" 
         ng-model="radioValue" 
         ng-value="true" 
         ng-change="validateRadio()" /> Yes<br />
  <input type="radio" 
         name="myRadio" 
         ng-model="radioValue" 
         ng-value="false" 
         ng-change="validateRadio()" /> No<br />
  <br />
  <select id="idType" 
          name="idProff" 
          ng-model="completiondetail.IDProofType" 
          ng-options="item.proofName as item for item in identityProof track by item">
    <option value="" selected>--Choose a Document--</option>
  </select>
</div>

AngularJS application

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {

  $scope.radioValue = false;
  $scope.identityProof = ["karnataka", "Tamilnadu", "Andhra", "Delhi", "Kerala", "Bihar"];
  $scope.completiondetail = {
    IDProofType: null
  };

  $scope.validateRadio = function() {
    if ($scope.radioValue) {
      $scope.completiondetail.IDProofType = 'Delhi';
    }
  }
});

> demo fiddle

Collectives™ on Stack Overflow

initialize dropdown values based on radio button cha

2 Answers 2

2 Comments

View

AngularJS application

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

View

AngularJS application

Comments

Related