<html ng-app="expanderModule">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="angular-1.3.0.js"></script>
<style>
*{
margin:0;
padding:0;
}
.drop-down-box{
width:100%;
position:relative;
}
.drop-down-box .title{
width:100%;
font-size: 12px;
padding: 6px 0 6px 10px;
color:#999;
height: 28px;
line-height:28px;
background: #fff;
border-bottom: 1px solid #f2f2f2;
border-top: 1px solid #f2f2f2;
cursor: pointer;
}
.drop-down-box .active{
color: #333;
}
.drop-down-box .detail{
position:absolute;
left:0;
top:42px;
width:100%;
z-index:2;
background-color:#fff;
}
.drop-down-box .detail li{
width:100%;
font-size: 12px;
padding: 6px 0 6px 10px;
color: #333;
height: 28px;
line-height:28px;
background: #fff;
border-bottom: 1px solid #f2f2f2;
cursor: pointer;
}
.drop-down-box .detail li:hover{
background-color:#e4e4e4;
}
</style>
</head>
<body ng-controller="myCtrl">
<dropdown conf="dropDownBox" >
</dropdown>
<dropdown conf="dropDownBox2" >
</dropdown>
</body>
<script>
var expModule=angular.module('expanderModule',[])
expModule.directive('dropdown', function($rootScope) {
return {
restrict : 'EA',
scope: {
conf: '=conf',
},
template : ' <div class="drop-down-box"><div ng-click="showMenu()"ng-class="{\'active\':isSelected}" class="title">'
+'<input type="text" placeholder="{{conf.title}}" ng-model="conf.returndata[\'value\']" readonly/><i class="icon-clear" ng-click="remove($event)">X</i></div>'
+'<ul class="detail" ng-show="isShow"><li ng-repeat="(key, list) in conf.data" ng-click="selectKey(key,list)"><span ng-bind="list"></span></li></ul></div> ',
link: function(scope,element,attrs) {
scope.isShow=false;
scope.isSelected=false;
scope.conf.returndata={};
function isEmptyObject(e) {
var t;
for (t in e)
return !1;
return !0
}
if(!isEmptyObject(scope.conf.selected)){
scope.returndata=scope.conf.selected;
for(var key in scope.conf.selected){
scope.conf.returndata['id']=key;
scope.conf.returndata['value']= scope.conf.selected[key];
}
}
/*scope.title=attrs.title;*/
scope.showMenu=function(){
scope.isShow=!scope.isShow;
}
scope.selectKey=function(key,list){
scope.isShow=false;
scope.isSelected=true;
scope.conf.returndata['id']=key;
scope.conf.returndata['value']=list;
}
scope.remove=function(e){
e.stopPropagation();
scope.conf.returndata={};
scope.conf.title="点击下拉显示";
scope.isSelected=false;
}
},
controller: function ($scope) {
}
}
})
expModule.controller('myCtrl',function($scope,$rootScope){
$scope.dropDownBox={
title:"点击下拉显示",
selected:{id:'x',value:1},
data:{a:1,f:2},
name:'title'
}
$scope.dropDownBox2={
title:"点击下拉显示",
data:{x:1,y:2,z:3,k:4,d:4,g:5,a:2},
name:'title'
}
})
</script>
</html>
