AngularJS 添加基于下拉值变化的选择

Question

我有一个表格，用户可以在其中 select 参加活动的成人人数。一旦这个值被 selected 我想要一个部分来显示所选成年人数量的 has meal selection 值。 IE，用户selects 2个成人，Adult Meal 1 select出现，Adult Meal 2 select出现。我现在只有表单域。我已经研究过并且已经看到可以动态添加字段，但是我还没有弄清楚如何完成我想要完成的事情。有人可以帮忙吗？

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

更新：
所以我想出了如何通过 JavaScript 来做到这一点。我将 divs 设置为最初隐藏，但是一旦 selected 中的下拉列表中的值显示 div。我现在面临的问题是我有两个不同的下拉菜单需要具有此功能，一个用于成人，一个用于儿童。当我 select 一个成人号码时，正确的 select 出现。然后，当我转到下一个儿童下拉菜单时，select 的正确数量也出现在那里，但成人的 select 消失了。我怎么才能让他们都留下来？

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

Answer 1

在AngularJs中你有ng-show属性，你可以根据范围内的变量设置元素的外观：

<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(){
});

AngularJS 添加基于下拉值变化的选择

AngularJS add selects based on dropdown value change

javascript

onchange

angularjs