AngularJS add selects based on dropdown value change

Question

I have a form where users would be able to select the number of adults attending an event. Once this value is selected I would like a section to appear the has meal selection values for the number of adults chosen. IE, user selects 2 adults, Adult Meal 1 select appears, Adult Meal 2 select Appears. All I have right now are the form fields. I have researched and have seen that fields can be added dynamically, but I haven't figured out how to accomplish what I am trying to accomplish. Can anyone help?

 <!DOCTYPE html>
<html lang="en-US">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14   /angular.min.js"></script>
</head>
<body>
<form name="oitrsvp">
<div ng-app="">
<p><b>First Name : </b><input type="text" ng-model="fname"    required></p>
  <p><b>Last Name : </b><input type="text" ng-model="lname" required></p>
  <p><b>Email Address : </b><input type="email" ng-model="email" required></p>
<label><b>How many parking passes will you need (for non-GT employees)?<b></label><br>
<select ng-model="model.ppass" convert-to-number>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<br>
<label><b>Please Select your meal time :</b></label><br>
<input type="radio" ng-model="mealtime" value="1">
11:30am
<br/>
<input type="radio" ng-model="mealtime" value="2">
12:30pm
  <br/>
  <br>
<label><b>How many adults will be attending with you?</b></label><br>
<select ng-model="model.numad" ng-change="addFields(model.numad)" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<label><b>How many children will be attending with you?</b></label><br>
<select ng-model="model.numch" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
</form>
</body>
</html>

UPDATE:
So I figured how to do this via JavaScript. I have divs set up to initially hide, but once a value in the dropdown in selected it shows that div. The problem I'm facing now is that I have two different drop downs that need to have this fnctionality, one for adults and one for children. When I select a number for the adults, the correct selects appear. Then when I go to the next dropdown for the children, the correct number of selects appear there too, but the selects for the adults go away. How cna I get them both to stay?

 <!DOCTYPE html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
var currentlyShown = null;

  function selectAdMeal(value){
  //alert(value);
    if(currentlyShown){
      currentlyShown.style.display = 'none';
    }
    var elem='am_' + value;
   // alert(elem);
    currentlyShown = document.getElementById(elem);

    if(currentlyShown){
      currentlyShown.style.display = '';
    }
  }
    function selectChMeal(value){
  alert(value);
    if(currentlyShown){
      currentlyShown.style.display = 'none';
    }
    var elem='ch_' + value;
   alert(elem);
    currentlyShown = document.getElementById(elem);

    if(currentlyShown){
      currentlyShown.style.display = '';
    }
  }
</script>
</head>
<body>

<div ng-app="">
<form name="oitrsvp">
  <p><b>First Name : </b><input type="text" ng-model="fname" required></p>
  <p><b>Last Name : </b><input type="text" ng-model="lname" required></p>
  <p><b>Georgia Tech Email Address : </b><input type="email" ng-model="gtemail" required></p>

  <label><b>How many parking passes will you need (for non-GT employees)?<b></label><br>
  <select ng-model="model.ppass" convert-to-number>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<br>
<h1>Hello {{fname}} {{lname}} {{model.ppass}}</h1>
<br>
  <label><b>Please Select your meal time :</b></label><br>
    <input type="radio" ng-model="mealtime" value="1">
    11:30am
  <br/>
    <input type="radio" ng-model="mealtime" value="2">
    12:30pm
  <br/>
  <br>
  <label><b>How many adults will be attending with you?</b></label><br>
<select ng-model="numad" id='numad' onchange="selectAdMeal(this.options[this.selectedIndex].value);" convert-to-number required>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<br><br>
<div id="am_0" style="display:none;">
  Please select the meal for yourself:<br>
  <input type="radio" ng-model="selfmeal" value="p">
  Pork<br>
  <input type="radio" ng-model="selfmeal" value="c">
  Chicken<br>
  <input type="radio" ng-model="selfmeal" value="v">
  Vegetarian
  <br><br>
</div>
<div id="am_1" style="display:none;">
  Please select the meal for yourself:<br>
  <input type="radio" ng-model="selfmeal" value="p">
  Pork<br>
  <input type="radio" ng-model="selfmeal" value="c">
  Chicken<br>
  <input type="radio" ng-model="selfmeal" value="v">
  Vegetarian
  <br><br>
    Please select the meal for Adult 1:<br>
  <input type="radio" ng-model="ad1meal" value="p">
  Pork<br>
  <input type="radio" ng-model="ad1meal" value="c">
  Chicken<br>
  <input type="radio" ng-model="ad1meal" value="v">
  Vegetarian
</div>
<div id="am_2" style="display:none;">
  Please select the meal for yourself:<br>
  <input type="radio" ng-model="selfmeal" value="p">
  Pork<br>
  <input type="radio" ng-model="selfmeal" value="c">
  Chicken<br>
  <input type="radio" ng-model="selfmeal" value="v">
  Vegetarian
<br><br>
  Please select the meal for Adult 1:<br>
  <input type="radio" ng-model="ad1meal" value="p">
  Pork<br>
  <input type="radio" ng-model="ad1meal" value="c">
  Chicken<br>
  <input type="radio" ng-model="ad1meal" value="v">
  Vegetarian
  <br><br>
  Please select the meal for Adult 2:<br>
  <input type="radio" ng-model="ad2meal" value="p">
  Pork<br>
  <input type="radio" ng-model="ad2meal" value="c">
  Chicken<br>
  <input type="radio" ng-model="ad2meal" value="v">
  Vegetarian
  <br><br>
</div>
<label><b>How many children will be attending with you?</b></label><br>
<select ng-model="numch" id='numch' onchange="selectChMeal(this.options[this.selectedIndex].value);" convert-to-number required>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<br><br>
<div id="ch_0" style="display:none;">
</div>
<div id="ch_1" style="display:none;">
  Please select the meal for Child 1:<br>
  <input type="radio" ng-model="ch1meal" value="hd">
  Hot Dog<br>
  <input type="radio" ng-model="ch1meal" value="h">
  Hamburger<br>
  <input type="radio" ng-model="ch1meal" value="v">
  Vegetarian
</div>
<div id="ch_2" style="display:none;">
  Please select the meal for Child 1:<br>
  <input type="radio" ng-model="ch1meal" value="hd">
  Hot Dog<br>
  <input type="radio" ng-model="ch1meal" value="h">
  Hamburger<br>
  <input type="radio" ng-model="ch1meal" value="v">
  Vegetarian
  <br><br>
  Please select the meal for Child 2:<br>
  <input type="radio" ng-model="ch2meal" value="hd">
  Hot Dog<br>
  <input type="radio" ng-model="ch2meal" value="h">
  Hamburger<br>
  <input type="radio" ng-model="ch2meal" value="v">
  Vegetarian
    <br><br>
    </div>

    <button ng-click="submit(form)">Submit</button>
    <button ng-click="addFields(form)">Add</button>
    </form>
    </div>
    </body>

</html>

I don't know how to implement the adding of fields on the dropdown change. — Lauren Robinson
– Lauren Robinson, Commented Jun 21, 2015 at 12:03

Elisheva Wasserman · Accepted Answer · 2015-06-22 05:00:59Z

In AngularJs you have ng-show attribute, You can set the appearance of an element according to variable in the scope:

<body ng-app="myApp">
<div  ng-controller="myctrl">
<form name="oitrsvp">
<select ng-model="numad" id='numad' convert-to-number required>
  <option value="0">0</option>
  <option value="1">1</option>
 <option value="2">2</option>
</select>

    <div id="am_0" ng-show="numad=='0'">am_0</div>
    <div id="am_1" ng-show="numad=='1'">am_1</div>
    <div id="am_2" ng-show="numad=='2'">am_2</div>

<select ng-model="numch" id='numch'  convert-to-number required>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

 <div id="ch_0" ng-show="numch=='0'">
    ch_0
</div>
<div id="ch_1" ng-show="numch=='1'">
ch_1
</div>
<div id="ch_2" ng-show="numch=='2'">
ch_2
</div>

 </form>
</div>

var myApp = angular.module('myApp',[]);
myApp.controller("myctrl",function(){
});

Collectives™ on Stack Overflow

AngularJS add selects based on dropdown value change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related