Angular4---select下拉框
发布时间:2020-12-17 08:44:30 所属栏目:安全 来源:网络整理
导读:需求 项目中前台使用angular实现,项目中的功能是下拉框配合搜索框实现模糊查询功能.既然可以配合查询条件一起查询,那么也应该可以支持将查询条件去掉,相当于无条件查询结果.示例图如下: 代码实现 select class="col-sm-3 form-control" style="width:200px;"
需求项目中前台使用angular实现,项目中的功能是下拉框配合搜索框实现模糊查询功能.既然可以配合查询条件一起查询,那么也应该可以支持将查询条件去掉,相当于无条件查询结果.示例图如下:
代码实现
<select class="col-sm-3 form-control" style="width:200px;" [(ngModel)]="courseId" name="courseId"> <option [ngValue]=""></option> <option class="col-md-1" *ngFor="let course of courseData" [value]="course.id">{{course.courseName}}</option> </select> 下拉框包含空白选项参考上面的代码,其中<option [ngValue]=""></option>实现的功能是有一个空白的选项.效果图如下图,红框中就是空白的选项:
默认回显上边的代码<select>标签中的[(ngModel)]指令是将选中项的Value值绑定到courseId,我们选择一项去查询这是前端到后端的一个过程.我们有时候会有编辑的功能,需要先从后台查回来回显到页面上,我们需要做的就是查询出数据之后赋值给courseId,实现了双向绑定的功能,这样我们从库中查回来的数据就可以默认的显示到select框上了. 总结办法总比困难多,无问题不学习.虽然很基础,但是还是很实用的. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容