2016-04-26 58 views
-2

两个字段我有总共3个选择框填充一个选择框。我将在2个选择框中选择值并点击提交按钮。将从这个填充第三个选择框的过程是什么。我有表中的数据,我在后端使用hibernate。什么是我的js文件,这个电话会被发布或获取。请帮助我,并给出整个过程。我在前端使用angularjs。请告诉我js文件的内容以及HTML文件中的修改。谢谢。Angularjs通过选择在不同的选择框

<form name="deviceForm" ng-submit="submitForm()"> 
<div class="container" style="margin-top:10px"> 

<div class="row" style="margin-top:20px"> 
<div class="col-sm-3" align="right"> 
<h4>Device Family<super style="color:red">*</super></h4> 
</div> 
<div class="col-sm-2" align="left"> 
<select class="form-control" ng-model="device.family"> 
     <option>Device 1</option> 
     <option>Device 2</option> 
     <option>Device 3</option> 
     <option>Device 4</option> 
     <option>Device 5</option> 

     </select> 
</div> 

<div class="col-sm-3" align="right"> 
<h4>Device Type<super style="color:red">*</super></h4> 
</div> 
<div class="col-sm-2" align="right"> 
<select class="form-control" ng-model="device.type"> 
     <option>Type 1</option> 
     <option>Type 2</option> 

     </select> 

</div> 
</div> 
</div> 


<div align="center" style="margin-top:30px"> 
<button type="submit" value="submit" class="btn btn-info ">Show Devices</button> 
</div> 
</form> 

这是我的HTML。 现在提交后,我将如何在js文件中发送这些Selected选项。

+1

不要问'whole'程序在这里,[因为...] (http://stackoverflow.com/help/how-to-ask)它会导致人们投下你的问题直到它锁定。 现在,第一粘贴您的模板。在另一方面,使用'GET'或'POST'只有您如何配置服务器端来处理更新.. –

+0

问题事宜!最后 – Akshay

+0

哈利路亚该请求 –

回答

0

有了你已经证明信息的吝啬,这是最让我可以这样做:

(() => 
{ 
    'use strict'; 
    angular.module('app', [/**'ng-routing'**/]) 
    .controller('DeviceController', [function() 
    { 
     var self = this; 
     // self.forms.new 
     // OR     ... angular will handle this for me 
     // self.forms.edit 
     self.storage = {}; // to store raw data from service or anywhere, needed for the form initialization 
     self.storage.types = [{id: 1, label: 'Type 1'}, {id: 2, label: 'Type 2'}, {id: 3, label: 'Type 3'}, {id: 4, label: 'Type 4'}, {id: 5, label: 'Type 5'}]; 
     self.storage.families = [{id: 1, label: 'Device 1'}, {id: 2, label: 'Device 2'}, {id: 3, label: 'Device 3'}, {id: 4, label: 'Device 4'}, {id: 5, label: 'Device 5'}]; 

     self.events = {}; 
     self.events.typeChanged = self.events.familyChanged = function() 
     { 
      self.storage.theThird = undefined; // this will be used to disable submit button while the value is not set, or any service result is waited to set the value 


      var type = self.data.type || 0; 
      var family = self.data.family || 0; 
      if (0 === (type * family) % 2) // you may implement any logic as needed. IF SYNTAX is just an example 
      {// this code executes only if the `id` at least one of `selected type` or `selected family` is even 
       self.storage.theThird = [{id: 2, label: '2016-02'}, {id: 4, label: '2016-04'}, {id: 6, label: '2016-06'}, {id: 8, label: '2016-08'}, {id: 10, label: '2016-10'}, {id: 12, label: '2016-12'}]; 
      } 
      else 
      { 
       self.storage.theThird = [{id: 1, label: '2016-01'}, {id: 3, label: '2016-03'}, {id: 5, label: '2016-05'}, {id: 7, label: '2016-07'}, {id: 9, label: '2016-09'}, {id: 11, label: '2016-11'}]; 
      } 
     } 
    }]); 
})(); 

...

<!DOCTYPE html> 
<html xmlns:ng="http://angularjs.org" ng-app="app" ng-cloak ng-strict-di> 
    <head> 
     <meta charset="utf-8"> 
     <title>{{app.title}}</title> 
     <script src="web/libs/jquery/dist/jquery.js"></script> 
     <script src="web/libs/angular/angular.js"></script> 
     <script src="web/js/javascript.js"></script> 
     <style> 
      label.optional:after 
      { 
       content: '*'; 
       color: red; 
      } 
      /** Folowing style are just to ease the viewing of changes **/ 
      main {display: flex; flex-direction: row-reverse} 
      main > aside {flex-grow: 1} 
      main > form {flex-shrink: 1} 
     </style> 
    </head> 
    <body> 
     <!-- You may declare your controller this way, or leave it to the responsibility of your router --> 
     <main ng-controller="DeviceController as ctrl"> 
      <aside> 
       <pre>{{ctrl|json}}</pre> 
      </aside> 
      <form name="ctrl.forms.new"> <!-- This way, we can access our form inside the controller --> 
       <div> 
        <label for="new-device-family"> 
         Family 
        </label> 
        <select 
         id="new-device-family" 
         ng-model="ctrl.data.family" 
         ng-change="ctrl.events.familyChanged()" 
         ng-options="family.id as family.label for family in ctrl.storage.families"> 
         <option></option> <!-- this empty option will allow an unselected state --> 
        </select> 
       </div> 
       <div> 
        <label for="new-device-type" class="optional"> 
         Type 
        </label> 
        <select 
         id="new-device-type" 
         ng-model="ctrl.data.type" 
         ng-change="ctrl.events.typeChanged()" 
         ng-options="type.id as type.label for type in ctrl.storage.types"> 
         <option></option> <!-- this empty option will allow an unselected state --> 
        </select> 
       </div> 
       <div> 
        <label for="new-device-the-third"> 
         The Thrid 
        </label> 
        <select 
         id="new-device-the-third" 
         ng-model="ctrl.data.theThird" 
         ng-options="theThird.id as theThird.label for theThird in ctrl.storage.theThird"> 
         <option></option> <!-- this empty option will allow an unselected state --> 
        </select> 
       </div> 
       <hr> 
       <button type="reset" ng-click="ctrl.forms.new.$setPristine(); ctrl.forms.new.$setUntouched()"> 
        Reset 
       </button> 
       <button type="sumbit" ng-disabled="!ctrl.data.theThird"> <!-- Disabled if the third is any falsy value --> 
        Reset 
       </button> 
      </form> 
     </main> 
    </body> 
</html>