angularjs组件之select

概况

根据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.对于复选功能的，如果删除选中的（如中国），则中国将会在下拉列表中显示