Javascript Angularjs通过在不同的选择框中选择两个字段来填充选择框
我一共有3个选择框。我将在两个选择框中选择值，并单击提交按钮。从该对话框填充第三个选择框的过程是什么。我在表中有数据，我在后端使用hibernate。我的js文件是什么，调用是post还是get。请帮助我并给出整个过程。我在前端使用angularjs。请告诉我js文件的内容以及HTML文件中的修改。多谢各位Javascript Angularjs通过在不同的选择框中选择两个字段来填充选择框,javascript,java,html,angularjs,hibernate,Javascript,Java,Html,Angularjs,Hibernate,我一共有3个选择框。我将在两个选择框中选择值，并单击提交按钮。从该对话框填充第三个选择框的过程是什么。我在表中有数据，我在后端使用hibernate。我的js文件是什么，调用是post还是get。请帮助我并给出整个过程。我在前端使用angularjs。请告诉我js文件的内容以及HTML文件中的修改。多谢各位 <form name="deviceForm" ng-submit="submitForm()"> <div class="container" style="ma
<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>
现在，在提交后，我将如何在js文件中编写以发送这些选定选项。由于您已经证明了信息的吝啬，这是我能做的最多的事情：
(() =>
{
'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'}];
}
}
}]);
})();
不要在这里询问整个过程，因为这会导致人们投票否决你的问题，直到它锁定为止。现在，先粘贴模板。另一方面，使用GET或POST只会影响您如何配置服务器端来处理已更新的requestquestion。您需要的是如何将控制器与表单一起使用，对吗？我没有看到您的第三个选择框
<!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>