angularJS实现可编辑的下拉框
将angularJS与插件select2结合使用即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="select2.css" />
<link rel="stylesheet" href="select2-bootstrap.css" />
<script type="text/javascript" src="jquery.1.11.1.js"></script>
<script type="text/javascript" src="angular.1.2.10.min.js"></script>
<script type="text/javascript" src="select2.min.js"></script>
<title>Title</title>
</head>
<body ng-app="demo" ng-controller="app">
<div class="col-sm-offset-2 col-sm-6">
<select select2 ng-model="search" ng-options="a for a in na" style="width:200px"></select>
<select select2 ng-model="search1" ng-options="name['网址'] for name in names track by $index|filter:search" style="width:200px"></select>
<input select2 ng-model="search" select2-model="aS2" config="config1" type="text" class="form-control">
</div>
</body>
<script type="text/javascript">
var app=angular.module("demo",[]);
app.controller('app',['$scope',function($scope){
// $scope.names=["小王","小明","小张","鹏鹏","大叔","张珊","李四"];//select标签的数据可谓对象也可以为数组
$scope.names=[
{"网址" : "Google", url : "a.html"},//当这边是中文时注意使用name['网址']，当不是中文时直接用name.字段名就好即分别为对象的两种取值方式，对象引用时前一种方式更为常见
{"网址" : "Runoob", url : "b.html"},
{"网址" : "Taobao", url : "c.html"}
]
//console.log(typeof $scope.names);
$scope.na=['白','大','李'];
$scope.config1 = {
data: [],
placeholder: '尚无数据'
};
$scope.config1.data = [{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}]//用input形式数据的形式必须为中种结构,不然会报错
}])
app.directive('select2', function () {
return {
restrict: 'A',
scope: {
config: '=',
ngModel: '=',
select2Model: '='
},
link: function (scope, element, attrs) {
// 初始化
var tagName = element[0].tagName,
config = {
allowClear: true,
multiple: !!attrs.multiple,
placeholder: attrs.placeholder || ' ' // 修复不出现删除按钮的情况
};
// 生成select
if(tagName === 'SELECT') {
// 初始化
var $element = $(element);
delete config.multiple;
$element
.prepend('<option value="" ng-if="false"></option>')//避免出现空的选项
.val('')
.select2(config);
// model - view
scope.$watch('ngModel', function (newVal) {
setTimeout(function () {
$element.find('[value^="?"]').remove(); // 清除错误的数据
},0);
}, true);
return false;
}
// 处理input
if(tagName === 'INPUT') {
// 初始化
var $element = $(element);
// 获取内置配置
if(attrs.query) {
scope.config = select2Query[attrs.query]();
}
// 动态生成select2
scope.$watch('config', function () {
angular.extend(config, scope.config);
$element.select2('destroy').select2(config);
}, true);
// view - model
$element.on('change', function () {
scope.$apply(function () {
scope.select2Model = $element.select2('data');
});
});
// model - view
scope.$watch('select2Model', function (newVal) {
$element.select2('data', newVal);
}, true);
// model - view
scope.$watch('ngModel', function (newVal) {
// 跳过ajax方式以及多选情况
if(config.ajax || config.multiple) { return false }
// $element.select2('val', newVal);
}, true);
}
}
}
});
//自定义过滤器，可以在过滤中传递多个参数，依次获取
app.filter('myfilter',function(){
return function(input,param){
//console.log(input);
// console.log(param);
var newInput=input.filter(function(item,index){
if(item.indexOf(param)!==-1)
return item;
})
return newInput;
}
})
</script>
</html>
angularJS实现可编辑的下拉框的更多相关文章
- 用MVC的辅助方法自定义了两个控件：“可编辑的下拉框控件”和“文本框日历控件”
接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰.后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽.这样设计界面来,想我种以前没学过JS,Jquer ...
- html 可编辑的下拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 自制jquery可编辑的下拉框
昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox ...
- javascript实现可编辑的下拉框
曾经遇到过一个需求的情况是这样的,我们提供给用户的输入框的可选择项只能满足用户的大部分情况的选择,但是有时候会遇到一些用户想要输入的数据是下拉项中所没有的,而用户不希望改变下拉项为输入框模式,需要说如 ...
- EXTJS 4.2 资料 控件之Grid 行编辑绑定下拉框，并点一次触发一次事件
主要代码: { header: '属性值', dataIndex: 'PropertyValueName', width: 130, editor: new Ext.form.field.ComboB ...
- jquery实现可编辑的下拉框( input + select )
HTML: <input id="inputModel" /> <select name="EngineModel" size="1 ...
- 自定义SWT控件一之自定义单选下拉框
一.自定义下拉控件 自定义的下拉框,是自定义样式的,其中的下拉框使用的是独立的window,非复选框的下拉框双击单机其它区域或选择完之后,独立window构成的下拉框会自动消失. package co ...
- 【经验】angularjs 实现带查找筛选功能的select下拉框
一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...
- angularjs下拉框实现渲染html
angualrjs处于安全的考虑,插值 指令会对相应字符串进行过滤,避免出现html攻击.但是在一些时候,我们需要渲染html,比如实现一个分级的下拉框,代码如下: <body ng-app=& ...
随机推荐
- effective OC2.0 52阅读笔记（六 块与大中枢派发）
派发队列:dispatch_queue 操作队列:NSOperationQueue 组:dispathc_group_t 37 理解“块”这一概念 总结:块就是一个值,且自有其相关类型.块的强大之处 ...
- Sql Server 2008服务启动失败，错误17058
SQL Server (SQLEXPRESS) 服务因 17058 (0x42A2) 服务性错误而停止. 有关更多信息,请参阅在 http://go.microsoft.com/fwlink/even ...
- [转] ImageView的android:adjustViewBounds属性
原文链接:http://blog.csdn.net/pingchuanyang/article/details/9252689 取值为true时: Adjust the ImageView's b ...
- eclipse远程连接hive
创建项目,添加jar包,hive的s上,所以也需要hadoop的一些jar 这个图片是从网上找的,我直接使用的以前hadoop的项目 创建测试类,写测试代码 //获取jdbc链接 private ...
- 安天AVLTeam送福利喽~~
#福利来了# duang~duang~duang~ 安小天帮你辨别短信真伪!!! 是不是经常收到真假难辨的[疑似诈骗短信]是真的?是假的? 傻傻分不清楚 现在不用怕啦!!! 遇到这种情况,只需手机截 ...
- windows批处理语法
写批处理文件,除了了解基本语法外,你还需要熟悉常用的windows命令,那就先看看这篇文章:windows常用命令 #重要说明 文件及目录路径:要使用反斜杠'\',不要使用正斜杠'/' 如:del d ...
- NewBluePill源码学习
NewBluePill的源码也看的差不多了,一直说等有时间了再写学习的一些心得,拖来拖去弄到现在了,时间不是等来的,慢慢开始吧. 0x00 初识硬件虚拟化 硬件虚拟化对大数人来讲还是比较陌生. ...
- Struts2 动态方法调用
01.Struts 2基本结构 使用Struts2框架实现用登录的功能,使用struts2标签和ognl表达式简化了试图的开发,并且利用struts2提供的特性对输入的数据进行验证,以及访问Servl ...
- 关于vector的内存释放问题
以前一直想当然的以为vector 的clear()函数会保证释放vector的内存,今天网上一查资料发现完全不是我想象的那样子. 比如有如下代码: tempObject obj1; tempObjec ...
- 198个经典C#WinForm实例源码(超赞) 里面的例子 .sln 目录
\-窗体技巧\QQ窗体\QQFrm.sln; \-窗体技巧\仿XP系统的任务栏菜单\仿XP系统的任务栏菜单.sln; \-窗体技巧\向窗体中拖放图片并显示\向窗体中拖放图片并显示.sln; \-窗体技 ...