Angularjs 通过选择不同选择框中的两个字段来填充选择框

Angularjs Populate a select box by selecting two fields in different select boxes

本文关键字：选择 两个 字段 填充 Angularjs      更新时间：2023-09-26

我总共有 3 个选择框。我将在 2 个选择框中选择值，然后单击提交按钮。从中填充第三个选择框的过程是什么。我在表中有数据，我在后端使用休眠。我的js文件是什么，调用是发布还是获取。请帮助我并给出整个过程。我在前端使用angularjs。请告诉我js文件的内容以及HTML文件中的修改。谢谢。

    <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文件中写入以发送这些选定的选项。

以您证明的信息的吝啬，这是我能做的最多的事情：

(() =>
{
    '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>
相关文章：