基于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>

 

posted @ 2017-03-30 00:56  莺哥  阅读(534)  评论(0)    收藏  举报