Angular中的select

最新推荐文章于 2019-07-21 19:23:50 发布

原创最新推荐文章于 2019-07-21 19:23:50 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍Angular中Select组件的应用，包括如何通过Select组件进行不同类型报告的选择，并展示对应的报告名称列表。文章详细解释了如何利用Angular内置指令[ngModel]及事件(ngModelChange)实现选项变化时的动态响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#angular中的select
我们经常会遇到通过select来进行选择的情况，需要向select的option中传递值，也需要从当前选中的option中获取值，本文将简介这一过程。

<div class="row">
    <div class="col-sm-2">
        <form class="form-horizontal" role="form">
            <div class="form-group" style="margin:auto;height:39px;">
                <label for="name" class="col-sm-2 control-label">type: </label>
                <div class="col-sm-10">
                    <select class="form-control" name="reportType" [ngModel]="reportType" (ngModelChange)="generateReportNameList($event)">
                        <option name="reportType" value="weekly"  ngDefaultControl>weekly</option>
                        <option name="reportType" value="monthly" ngDefaultControl>monthly</option>
                        <option name="reportType" value="quarterly" ngDefaultControl>quarterly</option>
                        <option name="reportType" value="semi-annual" ngDefaultControl>semi-annual</option>
                        <option name="reportType" value="annual" ngDefaultControl>annual</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <div class="col-sm-4">
        <form class="form-horizontal" role="form">
            <div class="form-group"  style="margin:auto;height:39px;">
                <label for="name" class="col-sm-2 control-label">time: </label>
                <div class="col-sm-10">
                <select class="form-control">
                    <option *ngFor="let reportName of reportNameList" [innerHTML]="reportName"></option>
                </select>
            </div>
            </div>
        </form>
    </div>
</div>

上面的html代码实现了两个并排的select，选择左边的select可以选择不同的report类型，同时右边select中的option显示相对应的report name列表，以便选择某类型的某个report。
准备工作：有一个reportName 的list，有一个根据不同类型来map reportName list的函数generateReportNameList(type:string)。
关键点在于，如何监听选中的option的变化，在angular中，有一套专门的机制来适应select。
[ngModel]="reportType"可以理解为将reportType这个变量的值赋给ngModel，(ngModelChange)="generateReportNameList($event)"则实现了对generateReportNameList函数的调用，ngModelChange的作用可以理解为每次change选中的option时执行相对应的动作（函数）。
左边的select做的一系列工作将reportName list更新为了相对应其type的，于是右边的select就可以愉快的展示以及选择report name list啦~