本文实例讲述了Angular封装搜索框组件操作。分享给大家供大家参考,具体如下:
创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都做网站、网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的丰县网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
后台管理系统多是以表格和表单为主,有列表就一定会有列表的筛选功能,所以在此把列表头部的搜索功能拆分出一个公共组件,方便使用。
大致样式如下图:
这里我使用的是ng-zorro蚂蚁金服的angular组件库
index.html:
index.ts:
import { OnInit, Input, Output, Component, EventEmitter } from '@angular/core';
import { _HttpClient } from '@delon/theme';
@Component({
selector: 'search-filter',
templateUrl: './index.html',
styleUrls: ['./index.less']
})
export class SearchFilterComponent implements OnInit {
@Input() columns;
@Input() loading;
@Output() toSearch = new EventEmitter
index.less:
:host {
display: block;
width: 95%;
margin: 0 auto;
::ng-deep {
nz-form-control {
min-width: 60%;
}
nz-select {
width: 100%;
}
.ant-calendar-picker {
width: 100%;
}
}
}
其中有个特殊的地方,是根据用户输入的关键字,先模糊搜索用户名和用户类型,再根据用户选择的用户id去进行筛选。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
当前题目:Angular封装搜索框组件操作示例
本文地址:
http://6mz.cn/article/gigpoo.html