AngularJS根据下拉值更改添加选择

时间：2015-06-21 02:33:47

标签： javascript angularjs onchange

我有一个表格，用户可以选择参加活动的成年人数量。一旦选择了这个值，我想要一个部分显示所选择的成年人数量的膳食选择值。 IE，用户选择2个成人，成人餐1选择出现，成人餐2选择出现。我现在所拥有的只是表格字段。我已经研究过并且已经看到可以动态添加字段，但我还没弄清楚如何完成我想要完成的任务。有人可以帮忙吗？

 <!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如何做到这一点。我有div设置为最初隐藏，但一旦选中它的下拉列表中的值显示div。我现在面临的问题是，我有两个不同的下降需要有这个功能，一个用于成人，一个用于儿童。当我为成人选择一个数字时，会出现正确的选择。然后当我为孩子们下一个下拉菜单时，也会出现正确的选择数量，但成年人的选择会消失。我怎么能让他们留下来？

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

1 个答案:

答案 0 :(得分：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(){
});
相关问题
最新问题