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