需求

项目中前台使用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框上了.

总结

办法总比困难多,无问题不学习.虽然很基础,但是还是很实用的.