概况
根据boss的要求,需要封装一些angularjs的组件,本着现学现卖的精神,特此封装了一个粗陋的下拉列表组件。
基本功能
1.通过后台返回的数据生成默认的select(类似传统的select)
2.返回默认的选中项
3.自定义默认的选中项(比如添加默认的提示语:“请选择时间”)
4.支持复选
5.支持搜索
6.支持智能提示
前端暴露的样式
单选
<div fdc-select selectdatas="{{selData2}}" defoption="{{disMember2}}" eloption ="{{addOption2}}"></div>
单选
<div fdc-select selectdatas="{{selData2}}" defoption="[1,2]" eloption ="请选择国家……" ismultiple="true"></div>
示例:
selectdatas:数据源(arr)
defoption:设置的默认值(arr)
eloption:自定义添加的值(str)一般为提示信息
ismultiple:是否支持复选,默认是单选
在controller中对数据初始化,默认选择美国,添加提示信息“请选择国家……”
$scope.selData2=[{
"key":1,
"value":"中国"
},{
"key":2,
"value":"美国"
},{
"key":3,
"value":"日本"
}];
$scope.disMember2="[2]";
$scope.addOption2="请选择国家……";
页面效果
单选的效果
复选的页面效果
业务简单描述
1.点击下拉列表,显示下拉选项,当鼠标选中下拉中的某一项时,会将该选项的值至于勾选状态,如果是单选则替换原来的旧值,并将背景高亮,如果是复选,则将该选中的值加入到选项框中,并在下拉列表剔除选中的项。
2.当下拉列表激活后,用户1.5s之内没有对下拉列表进行任何操作,则隐藏下拉列表
3.对于复选功能的,如果删除选中的(如中国),则中国将会在下拉列表中显示