为什么要自定义控件？html的select 不是可以用么？以前我就是这么想的，当我接到特殊需求时，需要我自己写一个下拉控件。

这个需求就是将图表横向放大，由于H5不能控制设备转向，所以我将图表通过css控制顺时针旋转90度。这时设备还是竖屏的，所以即使你将select空间旋转90度，当你点击下拉选项时，会发现选项是竖屏展示的。（不管是Android还是ios 均对h5的select 进行优化，即不在是网页那种显示方式，而是下方出现选项的弹框）这样就不合适了。需要你去写个select 组件了。

由于我使用的是Angularjs ，所以组件需要使用指定（directive） 来完成，

 angular.module('app')

     .directive('dropDown', [function () {

         return {

             restrict : 'EA',

             replace : true,

             transclude : true,

             scope : {

                 selecttitle : '=', //// 默认选中值

                 lidata:'=lidata',  //// 数据集如['张三','李四','王五']

                 clickChange:'&',   //// 选项变化时事件

                 disabled:'@'       //// 是否显示，支持表达式

             },

             template:'<div class="ddl" ng-show="disabled">'

             +'<div class="ddlTitle" ng-click="toggle()"><span ng-bind="selecttitle"></span><i class="fa fa-angle-down ddli"></i></div>'

             +'<ul ng-show="showMe">'

             +' <li ng-repeat="data in lidata" ng-click="clickLi(\'{{data}}\')">{{data}}</li>'

             +'</ul>'

             +'</div>',

             link: function ($scope, $element, $attrs) {

                 $scope.showMe = false;

                 $scope.disabled = true;

                 $scope.toggle = function toggle() {

                     $scope.showMe = !$scope.showMe;

                 };

                 $scope.clickLi=function clickLi(data_){

                     $scope.selecttitle=data_;

                     $scope.showMe = !$scope.showMe;

                 };

                 $scope.$watch('selecttitle', function(value) {

                     $scope.clickChange();

                 });

                     /*$scope.$watch( function() {

                         return $scope.$eval($attrs.setNgAnimate, $scope);

                     }, function(valnew, valold){

                         $animate.enabled(!!valnew, $element);

                     });*/

             }

         };

     }]);

Angularjs 控制器代码

 app.controller('***Ctl',[function(){

     $scope.currentEnttiy={};

     $scope.currentMetric="";

     $scope.initPage = function() {

         ......

         $scope.changeSelect();

     }

     //// 下拉选项变化时触发

     $scope.changeSelect=function(){

           ......

     }     

      $scope.initPage(); 

 }];

Html代码

 <html>

 <head>

      <title>hello jackical</title>

 </head>

 <body>

 <drop-down selecttitle="currentMetric" lidata="currentEnttiy.metricNameList" click-Change="changeSelect()"></drop-down>

 </body>

 </html>

css 样式

  .ddl{

         position: relative;

         padding:2px;

         cursor: pointer;

         background-color: #FAFAFA;

         width:254px;

         float: left;

     }

     .ddlTitle{

         height: 40px;

         line-height: 35px;

         padding: 2px;

         padding-left: 5px;

         padding-right: 5px;

         border: solid #cccccc 1px;

         font-size: 13px;

     }

     .ddlTitle span{

         margin-right: 10px;

         color: #58D0E1;

         padding-left: 5px;

     }

     .ddl ul li{

         list-style:none;

         border-top: dotted #cccccc 1px;

         line-height: 40px;

         padding-left: 5px;

     }

     .ddl ul{

         position:absolute;

         top:40px;

         width:250px;

         left:2px;

         border: solid #cccccc 1px;

         z-index:;

         background-color: white;

         padding:2px;

     }

     .ddli{

         font-size: 20px;

         float: right;

         margin-top: 5px;

     }

以上为实现代码片段。

附效果图：

转载请注明出处：http://www.cnblogs.com/jackicalSong/

OK ，代码己贴完。

Angularjs 自定义指令 （下拉菜单）的更多相关文章

  1. [k]自定义样式下拉菜单

    自定义样式下拉菜单-1 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> & ...

  2. angular 实现自定义样式下拉菜单

    自己闲着没事写了一个自定义的下拉菜单希望和大家交流一下!望能和大神们成为朋友. 下面上代码: <!doctype html> <html lang="en" ng ...

  3. 自定义 select 下拉菜单

    .selectBeautifyMainStyle{ color: #9fa0a0; font-size: 14px; font-family: "alegreya_sansthin" ...

  4. jq自定义下拉菜单，在点击非当前下拉菜单区域时，关闭下拉菜单（点击事件的对象不是目标元素本身）

    jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...

  5. 【Android初级】如何实现一个有动画效果的自定义下拉菜单

    我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...

  6. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  7. 针对angularjs下拉菜单第一个为空白问题处理

          angularjs 的select的option是通过循环造成的,循环的方式可能有  ng-option  或 者 <option  ng-repeat></option ...

  8. IOS第二天-新浪微博 - 添加搜索框，弹出下拉菜单 ，代理的使用 ，HWTabBar.h（自定义TabBar）

    ********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...

  9. iOS 下拉菜单 FFDropDownMenu自定义下拉菜单样式实战-b

    Demo地址:https://github.com/chenfanfang/CollectionsOfExampleFFDropDownMenu框架地址:https://github.com/chen ...

  10. android 自定义下拉菜单

    本实例的自定义下拉菜单主要是继承PopupWindow类来实现的弹出窗体,各种布局效果可以根据自己定义设计.弹出的动画效果主要用到了translate.alpha.scale,具体实现步骤如下: 先上 ...

随机推荐

  1. Docker技术三大要点：cgroup, namespace和unionFS的理解

    www.docker.com的网页有这样一张有意思的动画: 从这张gif图片,我们不难看出Docker网站想传达这样一条信息, 使用Docker加速了build,ship和run的过程. Docker ...

  2. 2014年百度之星资格赛第一题Energy Conversion

    Problem Description 魔法师百小度也有遇到难题的时候-- 如今.百小度正在一个古老的石门面前,石门上有一段古老的魔法文字,读懂这样的魔法文字须要耗费大量的能量和大量的脑力. 过了许久 ...

  3. luogu P1642 规划

    嘟嘟嘟 看到最后让求一个比值,应该得往01规划上去想.令x = ∑v[i] / ∑c[i],则x * ∑c[i] = ∑v[i], ∑(v[i] - x * c[i]) = 0. 于是可以二分x(注意 ...

  4. PHP使用in_array函数检查数组中是否存在某个值

    PHP使用 in_array() 函数检查数组中是否存在某个值,如果存在则返回 TRUE ,否则返回 FALSE. bool in_array( mixed needle, array array [ ...

  5. ThinkPHP3.2.3快速入门：基础篇

    一.安装 thinkphp无需安装,只需将从官网上下载的压缩包解压后,把所有文件放到localhost根目录里就行了 二.压缩包中文件简述 :应用程序文件夹.自己所写的文件都放在这个文件夹里面 :公用 ...

  6. 8.spring：事务管理（上）:Spring的数据库编程、编程式事务管理

    Spring的数据库编程 Spring框架提供了JDBC模板模式------>JdbcTemplate 简化了开发,在开发中并不经常是使用 实际开发更多使用的是Hibernate和MyBatis ...

  7. webstorm window找不到文件'chrome'

    1.打开webstorm设置: File->Settings->Tools->Web Browsers->更改谷歌浏览器的Path(获取方式:谷歌浏览器的快捷键->右键- ...

  8. Visual Studio2015无法启动IIS Express Web 服务器的解决方案

    有时通过VS2015启动项目会弹出提示框:无法启动IIS Express Web服务器 出现这种提示框有可能是因为此项目的解决方案是从别人电脑中拷贝过来的,所以启动会出现错误. 解决办法就是删除解决方 ...

  9. Intellij IDEA如何删除项目

    1.      删除某个项目 1)       选中项目,并关闭 2)       File-Open,再选中相应的项目,并delete即可,它会同时在硬盘上删除

  10. Hello, GitHub!

    GitHub作为版本控制的软件,我决定重新系统学习这个东西,毕竟以前都是fork.clone... 1. 理解Git思维 首先呢,我一开始就被GitHub和Git两个东西搞昏了,所以有必要理解二者的关 ...