有角度封装搜索框组件操作示例

本文实例讲述了有角的封装搜索框组件操作。分享给大家供大家参考，具体如下：

后台管理系统多是以表格和表单为主，有列表就一定会有列表的筛选功能，所以在此把列表头部的搜索功能拆分出一个公共组件，方便使用。

大致样式如下图：

这里我使用的是ng-zorro蚂蚁金服的有角的组件库

index.html:

div NZ-form class=' ant-advanced-search-form ' NZ-row[NZ装订线]=' 24 ' NZ-col[NZ SPan]=' 8 ' * ngFOr=' let item of columns，let I=index '[style。display]='(I2！'expandForm)？none ' : ' block ' ' NZ-form-item NZFlex NZ-form-label style=' min-width : 20%；'{ { item。label } }/NZ-form-label NZ-form-control输入NZ-input[(ng model)]='搜索数据[项。'键]'占位符='请输入* NgiF=' item。type==' input ' ' NZ-select[(ng model)]='搜索数据[项。键“nzPlaceHolder=”请选择* ngIf=' item。type==' select ' ' NZ-option * ngFOr=' let of item。数据；让idx=index '[nzLabel]=' son。标签“[nzValue]=”子。value '/NZ-option/NZ-select NZ-select[(ng model)]='搜索数据[项。键“nzPlaceHolder=”请选择* NgiF=' item。type==' gender ' ' NZ-option NZlabel='女nzValue=0/NZ-option NZ-option nzLabel='男nzValue=1/NZ-option/NZ-select NZ-select[(ng model)]='搜索数据[项。键“nzPlaceHolder=”请输入* ngIf=' item。type==' operator ' ' nzAllowClear nzShowSearch[nzserverssearch]=' true '(nzOnSearch($ event)'(ngModelChange)=' change option($ event)' ng-container * ngforr=' let opt of operator options ' NZ-option[nzValue]=' opt '[nzLabel]=' opt。名字“-选择。user _ type '/NZ-option/ng-container/NZ-select NZ-select[(ng model)]='搜索数据[项目]键.请输入* ngIf=' item。type==' merchant ' ' nzAllowClear nzShowSearch[nzserversearch]=' true '(nzOnSearch)=' on search _ merchant($ event)' ng-container * ngforr=' let opt of commercation ' NZ-option[nzValue]=' opt。id '[nzLabel]=' opt。name '/NZ-option/ng-container/NZ-select NZ-select[(ng model)]='搜索数据[项。键“nzPlaceHolder=”请输入* Ngif=' item。type==' client ' ' nzAllowClear nzShowSearch[nzServerSearch]=' true '(nzOnSearch)=' onSearch _ client($ event)' ng-container * ngforr=' let opt of client options ' NZ-option[nzValue]=' opt。id '[nzLabel]=' opt。名称'/NZ-option/ng-container/NZ-select NZ-select[(ng model)]='搜索数据[项。键“nzPlaceHolder=”请输入* ngIf=' item。type==' admin ' ' nzAllowClear nzShowSearch[nzserverssearch]=' true '(nzOnSearch _ admin($ event)' ng-container * ngforr=' let of opt of admin options ' NZ-option[nzValue]=' opt。id '[nzLabel]=' opt。name '/NZ-option/ng-container/NZ-select NZ-date-picker * NgiF=' item。type==' date ' '[(ngModel)]='搜索数据[项键]' .[隐藏]='filterLength=3 '按钮NZ-button type=' submit ' nzType=' primary '[nzLoading]=' loading '(单击)=' submit()'查询/button button NZ-button type=' reset '(单击)='resetData()' class='mx-sm '重置/button/NZ-col/NZ-row NZ-row[隐藏]='筛选器长度3 ' NZ-col[NZSPan]=' 24 ' style=' text-align : right；button NZ-button type=' submit ' nzType=' primary '[nzLoading]=' loading '(单击)=' submit()'查询/button button NZ-button type=' reset '(单击)='resetData()' class='mx-sm '重置/按钮a(点击)='expandForm=！expandForm ' * Ngif='筛选器长度3"{ expandForm？'收起' : '展开} } I class=' anticon '[class。anticon-down]='！expandForm '[类。anticon-up]=' expandForm '/I/a/NZ-col/NZ-row/divindex。ts :

从“@棱角分明/核心”导入{输入、输出、组件、事件发射器}；从“@德隆/主题”导入{ _ HttpClient }；@ Component({选择器： '搜索过滤器'，模板Url: ' ./index.html '，style URL 3360[]./index.less']})导出类SearchFilterComponent实现OnInit { @Input()列；@Input()正在加载；@ Output()来搜索=new event emitertobject()；构造函数（私有httpClient: _HttpClient，{ } search data : any={ page : 1，limit : 15 }；过滤器长度=0；运算符选项=[]；商品类=[];client OptiOns=[]；adminOptions=[]；ngOnInit(){ this。列。foreach(El={ if(El。type==' operator '){ this。搜索数据[' user _ id ']=' '；这个。搜索数据。user _ type ']=' '；这个。OnSearch(')} if(El。type==' merchant '){ this。OnSearch _ merchant(')} if(El。type==' client '){ this。OnSearch _ client(')} if(El。type==' admin '){ this。OnSearch _ admin(')}这。搜索数据[El。key]=' '；this.filterLength}) } //清空搜索条件在本例中为{ const I }。搜索数据){ if(this。搜索数据[I]){这个。搜索数据[I]=' '；} }这个。搜索数据。page=1；这个。搜索数据。极限=15；这个。submit()；} //搜索按钮事件submit(){ if(this。搜索数据。运算符){删除此。搜索数据。操作员；}如果(这个。搜索数据。start _ at){ this。搜索数据。start _ at=this。格式(这个。搜索数据。start _ at)} if(this。搜索数据。end _ at){ this。搜索数据。end _ at=this。格式(这个。搜索数据。end _ at)}这个。去搜索。发射(这个。搜索数据)；} //日志操作人搜索onSearch(值：字符串){ this。httpclient。get('/API/admin/member？name=' value ').subscribe((RES : { })={ const resdata : any=RES；这个。运算符选项=resdata。消息；});} ChangeOption(值： { }){ this。搜索数据。user _ id=值[' id ']；这个。搜索数据。user _ type=value[' user _ type ']；} //商户名称搜索onSearch _ merchant(值：字符串){ this。httpclient。get('/API/admin/商户？name=' value ').subscribe((RES : { })={ const resdata : any=RES；这个。商船运输=resdata。消息。数据；});} //客户名搜索onSearch _ client(值：字符串){ this。httpclient。get('/API/admin/user？name=' value ').subscribe((RES : { })={ const resdata : any=RES；这个。客户端选项=resdata。消息。数据；});} //操作员名搜索onSearch_admin(值：字符串){这个。httpclient。get('/API/admin/admin？name=' value ').subscribe((RES : { })={ const resdata : any=RES；这个。AdminOptions=resdata。消息。数据；});} //格式化时间格式（时间){ var date=新日期(时间);var年份=日期。getfull year()；var month=日期。get month()1；var day=日期。getdate()；返回（年'-'月'-'日);}}index.less:

:主机{ display:块；宽度： 95%;margin : 0 auto : ng-deep { NZ-form-control { min-width : } 60%；} NZ-选择{宽度： 100%；} .ant-calendar-picker { width : 100%；} }}其中有个特殊的地方，是根据用户输入的关键字，先模糊搜索用户名和用户类型，再根据用户选择的用户编号去进行筛选。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题： 《AngularJS指令操作技巧总结》 、 《AngularJS入门与进阶教程》 及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。