Angularjs 自定义指令 （下拉菜单）
为什么要自定义控件？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 自定义指令 （下拉菜单）的更多相关文章
- [k]自定义样式下拉菜单
自定义样式下拉菜单-1 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> & ...
- angular 实现自定义样式下拉菜单
自己闲着没事写了一个自定义的下拉菜单希望和大家交流一下!望能和大神们成为朋友. 下面上代码: <!doctype html> <html lang="en" ng ...
- 自定义 select 下拉菜单
.selectBeautifyMainStyle{ color: #9fa0a0; font-size: 14px; font-family: "alegreya_sansthin" ...
- jq自定义下拉菜单，在点击非当前下拉菜单区域时，关闭下拉菜单（点击事件的对象不是目标元素本身）
jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...
- 【Android初级】如何实现一个有动画效果的自定义下拉菜单
我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...
- JavaScript 多级联动浮动(下拉)菜单 (第二版)
JavaScript 多级联动浮动(下拉)菜单 (第二版) 上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...
- 针对angularjs下拉菜单第一个为空白问题处理
angularjs 的select的option是通过循环造成的,循环的方式可能有 ng-option 或 者 <option ng-repeat></option ...
- IOS第二天-新浪微博 - 添加搜索框，弹出下拉菜单 ，代理的使用 ，HWTabBar.h（自定义TabBar）
********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...
- iOS 下拉菜单 FFDropDownMenu自定义下拉菜单样式实战-b
Demo地址:https://github.com/chenfanfang/CollectionsOfExampleFFDropDownMenu框架地址:https://github.com/chen ...
- android 自定义下拉菜单
本实例的自定义下拉菜单主要是继承PopupWindow类来实现的弹出窗体,各种布局效果可以根据自己定义设计.弹出的动画效果主要用到了translate.alpha.scale,具体实现步骤如下: 先上 ...
随机推荐
- 设计模式：装饰器（Decorator）模式
设计模式:装饰器(Decorator)模式 一.前言 装饰器模式也是一种非常重要的模式,在Java以及程序设计中占据着重要的地位.比如Java的数据流处理,我们可能看到数据流经过不同的类的包装和 ...
- Mac os下profile设置
Mac os环境下home目录下是没有profile文件的开启终端后,读取的是/etc/profile文件因为个人喜欢使用ll命令,mac默认并没有这个命令,所以使用如下方法设置别名 cp -rp / ...
- iotop使用详解
iotop是top和iostat程序的混合体,能够显示系统中所有运行进程并将进程根据I/O统计信息排序. 这个软件使用了Linux内核的一些新特性,所以需要2.6.20或者更新的内核. 一般默认情况下 ...
- July 15th 2017 Week 28th Saturday
If I can't hear your heartbeat, you are too far away. 如果我听不见你的心跳,那是因为你离我太远了. Only when the two tight ...
- OC基础数据类型-NSString
1.字符串的初始化 //字符串的初始化 NSString *str = @"Hello world!"; NSString *str2 = [[NSString alloc] in ...
- JPA注解实现联合主键
当表中一个主键不能唯一标识一条记录的时候,就需要使用联合主键了,下面是使用JPA注解实现联合主键的代码 1 首先需要建立一个复合主键类,用来存放需要生产联合主键的属性,该类需要实现序列化. packa ...
- 怎么解决深入学习PHP的瓶颈？
PHP给学习者的感觉是:初学的时候很容易,但是学了2-3年,就深刻感觉遇到了瓶颈,很难深入,放弃又可惜.所谓“鸡肋,食之无味弃之可惜”的感觉很是贴切. 经常会有这种感觉:不学,看似也不后退:学了,好像 ...
- 如何将编写好的CS文件做成exe可执行文件
编译好的控制台CS文件: cs文件单独拿出来放到F盘目录中 打开命令提示CMD: 执行下面语句即可在F盘目录中看到生成的exe文件,windows系统下双击就可运行: C:\Windows\Micro ...
- 【luogu P3946 ことりのおやつ】 题解
题目链接:https://www.luogu.org/problemnew/show/P3946 交好几遍是因为虽然能过一直有提醒..强迫症qwq #include <bits/stdc++.h ...
- FreeRTOS 和uCOS II的简单比较
转载:http://www.viewtool.com/bbs/forum.php?mod=viewthread&tid=114 这是两种RTOS, 现在粗略比较一下. freeRTOS比uCO ...