基于angularjs的自定义select插件
<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>