、これは私が行うことができ、ほとんどです。
(() =>
{
'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>
は、ここでは 'whole'手順を尋ねることはありません[...理由] （http://stackoverflow.com/help/how-to-ask）それがロックされるまで人々があなたの質問を投票させます。 今すぐテンプレートを貼り付けてください。一方、 'GET'または' POST'を使用すると、そのリクエストを処理するためにサーバー側をどのように設定するかという点だけが問題になります –
question updated ... – Akshay
ハレルヤ！最後に –