- 浏览: 800176 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (480)
- Spring (12)
- Hibernate (8)
- Struts2 (4)
- Java 基础-JDK-类-接口-URI-专题研究 (27)
- 线程、线程池、多线程高并发高可用、Socket通信 (15)
- Oracle数据库 (20)
- 一般-前端js-html-其它 (25)
- JYSK-互联网金融、金融科技、支付、公司、新闻等等 (8)
- Ajax-jQuery开源框架 (7)
- Json-轻量级的数据交换格式 (14)
- JavaScript (15)
- Jsp、Servlet、Servlet+JSP+JavaBean开发模式(MVC) (18)
- Html-JavaScript-前端-调用接口 (12)
- Sql Server 2005 (6)
- 正则表达式 (2)
- Java tools (18)
- 加签与验签、加密与解密 (3)
- Ajax技术核心-xmlHttpRequest(简称XHR) (6)
- xml-数据交换格式 (3)
- 信息采集 (1)
- Http - Https - HttpClient - httpCore-SSL-TLS (10)
- HtmlParser (2)
- 标签库 (1)
- SMS (2)
- jxl-导入导出 (4)
- poi-导入导出 (2)
- 定时器Timer+Quartz (6)
- 工作流引擎JBPM3.2.3 (4)
- 工作流引擎JBPM4 (0)
- 数据源-JNDI (0)
- tomcat、weblogic等应用服务器 (6)
- 工作流引擎jbpm5 (1)
- 搜索引擎Lucene (1)
- ant (1)
- 大数据-HBase (2)
- bigtable (0)
- 数据库设计 (4)
- jquery tab (0)
- mybatis (5)
- jquery ui 1.10.3 (5)
- Jboss7 (1)
- 规则引擎drools (0)
- 工作流引擎Activiti5 (0)
- 数据库-用户自定义函数 (0)
- 数据库-存储过程 (2)
- 数据库-视图 (0)
- 数据库-触发器 (0)
- 数据库-sql (2)
- highcharts-图表工具 (1)
- sql server 2008 (6)
- 诗词-工作室 (2)
- 数据割接 (1)
- GIS-地理信息系统 (2)
- RS-遥感技术 (1)
- GPS-全球定位系统 (1)
- java整合flex_RIA开发 (3)
- C#编程语言 (5)
- webservice_axis2_cxf_soap_wsdl (2)
- sql语句 (3)
- Flex_WebService_GIS (25)
- PHP编程语言 (0)
- ExtJS4.2 (1)
- Spring mvc (5)
- EasyUI1.4.2 (16)
- 日期时间工具类 (4)
- 随机数 (1)
- Arcgis api for js (0)
- Mysql数据库 (9)
- 移动互联网 java html5/flash socket netty (0)
- API接口 (1)
- AndroidStudio (0)
- Git (2)
- Maven (5)
- IDEA (0)
- 大数据-Hadoop (2)
- JPA (0)
- Spring boot (4)
- JSF (0)
- nginx_lua_module_redis (2)
- Activiti (1)
- bootstrap (1)
- AngularJS (10)
- 数据库-索引 (1)
- Linux及其连接工具SSH (4)
- java日志管理 (2)
- islider滑动控件 (1)
- jquery (1)
- 异常处理Exception (1)
- 秒杀与类秒杀系统 (1)
- 连接数据库、数据库连接池 (4)
- 数据库-临时表 (1)
- 软件设计模式-单例、多例、代理、工厂、观察者 (3)
- 集合框架 (5)
- 人工智能--Artificial intelligence、神经网络算法、机器学习 (1)
- 分布式应用 (1)
- SOA服务-Dubbo框架-Thrift框架 (2)
- Zookeeper分布式服务框架 (2)
- intellij idea (1)
- python编程语言 (0)
- 消息队列_MQ (0)
- 消息队列_RabbitMQ (2)
- 消息队列_ActiveMQ (1)
- 消息队列_Kafka (2)
- 缓存_Redis (4)
- 缓存_Memcache (0)
- 缓存_Ehcache (0)
- ivy-ivyde (1)
- google-protocol buffers (1)
- 正向代理-正向代理服务器 (1)
- 反向代理-反向代理服务器 (1)
- JVM内存模型 (0)
- Thunder框架 (1)
- NIO-非阻塞式IO (0)
- 软件测试、性能测试 (1)
- 序列化、Serializable接口、Externalizable接口 (3)
- 线程池-ExecutorService-ThreadPoolExecutor (1)
- web.xml (1)
- java开发-java工具-实用工具网站 (6)
- 医疗 (1)
- Filter-过滤器 (2)
- Unicode码-双字节字符编码 (1)
- OpenResty (1)
- 计算机网络 (1)
- eclipse_myeclipse_intellij idea (3)
- Enum (1)
- 大数据--Big Data (1)
- 云计算--Cloud computing (1)
- Elastic-Job (1)
- Redis (2)
- 文件流-IO操作 (6)
- 计算机基础知识 (1)
- Hessian-二进制RPC协议 (1)
- String类 (3)
- BigDecimal类 (1)
- java重要接口 (1)
- ReactJS (1)
- 跨域问题 (0)
- Map (1)
- 注解 (1)
- ASCII码-单字节字符编码 (1)
- 微服务、微服务架构 (2)
- RPC协议、RPC服务、RPC框架 (0)
- java反射 (1)
- java项目之classpath (1)
- 经典算法-树 (1)
- listener-监听器 (1)
- Interceptor-拦截器 (1)
- pojo javabean (2)
- 计算机科学与技术-进阶 (1)
- 代码规范与文档编写 (1)
- UML-统一建模语言 (1)
- 对接微信、支付宝 (3)
- 压力测试 (1)
- 办公软件-Excel (1)
- 办公软件-PPT (0)
- UTF8、GBK编码 (1)
- 微服务架构:Spring Cloud架构-Dubbo架构 (6)
- Nginx (1)
- 点滴业务 (1)
- form表单-json数据-转换与接口调用 (1)
- Junit单元测试 (1)
- 大数据-Spark (1)
- 大数据-Storm (1)
- 数据库事务-Spring事务 (0)
- elasticsearch (1)
- windows (1)
最新评论
html:
js:
//AngularJS $emit $broadcast $on
<div ng-controller="mySelectController"> <select ng-model="myField" ng-options="Field.label for Field in names" ng-change="mySelectControllerChange()"> <option value=''>{{'SELECT.LABEL.VXI.CUSTOM.SELECT' | translate}}</option> </select> </div> <div ng-controller="myRelationController"> <select ng-model="myRelation" ng-options="relation.name for relation in relationList" > <option value=''>{{'SELECT.LABEL.VXI.CUSTOM.SELECT' | translate}}</option> </select> </div>
js:
var mySelectController=['$scope', '$http', '$rootScope', function($scope, $http, $rootScope) { //$http的method可以是get/delete/head/jsonp/post/put //$http服务快捷的get请求 //alert('root=='+ACTIVITI.CONFIG.contextRoot);//对应/activiti-explorer/service $http({ method:'PUT', url:ACTIVITI.CONFIG.contextRoot +'/getFormFieldList' }) .success( function(data,status,headers,config){ //成功加载 $scope.names=data; }) .error( function(data,status,headers,config){ //处理错误 //do nothing } ); //change $scope.mySelectControllerChange=function(){ var app=angular.module('activitiModeler',[]); if($scope.myField.optionGroupId!=null && $scope.myField.optionGroupId!=''){ //有optionGroup console.log('if'); $rootScope.relationList = [{id:0,name:'等于'},{id:1,name:'不等于'},{id:2,name:'包含'}]; }else{ //没有optionGroup console.log('else'); $rootScope.relationList = [{id:0,name:'等于'},{id:3,name:'大于'},{id:4,name:'小于'},{id:5,name:'小于等于'},{id:6,name:'大于等于'},{id:2,name:'包含'}]; } } } ];
//AngularJS $emit $broadcast $on
//change $scope.mySelectControllerChange=function(){ var data=null; if(null==$scope.myColumnSelectModel){ data={ pa:'', pb:'' }; }else{ data={ pa:$scope.myColumnSelectModel, pb:$scope.myColumnSelectModel.optionGroupId }; } $scope.$emit('to_myParentController_on_myColumnSelectModel_change',data); } /*myParentController*/ angular.module('activitiModeler').controller('myParentController',['$rootScope', '$scope', '$http', '$timeout','$window', function ($rootScope, $scope, $http, $timeout,$window) { //选择字段下拉列表,触发关系符下拉 $scope.$on('to_myParentController_on_myColumnSelectModel_change',function(event,data){ $scope.$broadcast('to_myRelationController_on_myColumnSelectModel_change',data); }); }]); /*关系符*/ angular.module('activitiModeler').controller('myRelationController',['$rootScope', '$scope', '$http', '$timeout','$window', function ($rootScope, $scope, $http, $timeout,$window) { $scope.myRelationDisableVar=true; $scope.objDisableTrue=true;//加上灰背景 //接收事件-根据字段显示下拉 $scope.$on('to_myRelationController_on_myColumnSelectModel_change',function(event,data){ if(data.pa!=''){ $scope.myRelationDisableVar=false; $scope.objDisableTrue=false;//去掉灰背景 if(data.pb!=null && data.pb!=''){ //有optionGroup $scope.relationList = [{id:0,name:'等于'},{id:1,name:'不等于'},{id:2,name:'包含'}]; }else{ //没有optionGroup $scope.relationList = [{id:0,name:'等于'},{id:3,name:'大于'},{id:4,name:'小于'},{id:5,name:'小于等于'},{id:6,name:'大于等于'},{id:2,name:'包含'}]; } }else{ $scope.relationList=null; $scope.myRelationDisableVar=true; $scope.objDisableTrue=true;//加上灰背景 } }); }]);
发表评论
-
angularjs项目运行环境 及 常见问题解决
2017-01-09 10:58 1947配置angularjs项目运行环境的几个步骤 1--安装 ... -
运行angularjs项目--安装nodejs,配置项目运行环境
2016-10-10 15:45 784参考资料: http://m.blog.csdn.net/ar ... -
AngularJS tree demo
2016-04-07 14:01 30251、效果图 2、代码 js、css <scr ... -
angularJS文本框根据输入字符(文本框值)进行查询ng-keydown ng-keyup
2016-04-05 16:12 2831html: <input ... -
angularjs中My97DatePicker无法通过$scope.ngModel获取值解决
2016-03-24 17:42 11721、写一个angular自定义指令Directive(网上找的 ... -
AngularJs输出字符串换行\n或<br/>不管用时,要用ng-bind-html配合解决
2016-03-24 16:59 134381、controller /*显示条件表达式*/ var m ... -
angularjs select multiple="multiple" ng-repeat
2016-03-10 11:36 1862效果图: <!DOCTYPE html> ... -
angularjs ul li radio span ng-class ng-checked demo
2016-03-01 14:09 385效果图: 点击li中的radio,选中li中的文字; 点击li ... -
AngularJS 学习示例
2016-02-25 10:42 5321、九种提高AngularJS性能 ...
相关推荐
今天,我们将讨论一个特定的话题:如何使用AngularJS来实现基于一个下拉菜单(select)的选择项来动态改变另一个下拉菜单的选项值。 首先,我们需要理解 AngularJS 中的数据绑定机制。通过使用 ng-model 指令,我们...
AngularJS是一款强大的前端JavaScript框架,而select2是一个流行的jQuery插件,它提供了美观且功能丰富的选择器组件,包括单选和多选下拉列表。 **一、AngularJS与ui-select2简介** AngularJS通过数据绑定和依赖...
这个"angularjs中select2使用demo"应该是一个示例项目,展示了如何在AngularJS应用中集成和使用Select2。 首先,让我们了解AngularJS和Select2的基础知识。AngularJS是由Google维护的一个JavaScript框架,用于构建...
在本文中,我们将深入探讨如何使用AngularJS来创建一个自定义的Select组件,该组件具有选项自定义和搜索查找功能。AngularJS是一个流行的JavaScript框架,它提供了强大的数据绑定和依赖注入机制,使得构建动态Web...
AngularJS是一个流行的前端JavaScript框架,由Google团队开发,用以构建动态Web应用程序。其中,Select(选择框)控件是用户交互中常用的元素之一,它允许用户从一组选项中进行选择。AngularJS通过ng-options指令...
但在AngularJS中,我们可以使用`ng-selected`指令,它接受一个表达式,如果表达式的值为真,则该选项会被选中。在例子中,`ng-selected="1"`表示如果`1`为真,则选中该选项。由于`1`在JavaScript中始终为真,所以...
`ng-model`指令绑定到了`ZNoteVo.type`,这意味着当用户在下拉列表中选择一个值时,`ZNoteVo.type`会同步更新为选定的`id`。 为了设置默认值,我们在控制器中初始化`ZNoteVo`对象,并为其`type`属性赋值。在这个...
在AngularJS中实现多选,我们需要使用`multiple`属性,并且将`ngModel`设置为一个数组,这样用户可以选择多个值。示例如下: ```html <select multiple ng-model="selectedItems" ng-options="item.name for item ...
当用户选择一个节点时,将其值设置为所选节点的标识符,并更新UI以反映当前的选择。 7. **事件绑定**:通过AngularJS的`ng-change`指令监听下拉框的改变事件,触发相应的处理函数,如更新模型、执行业务逻辑等。 ...
`<select>`元素用于创建一个下拉列表,可以包含多个`<option>`元素来定义可选项。例如: ```html <select id="select1"> <option value="option1">Option 1 <option value="option2">Option 2 </select> <select...
angularjs select2 多选, 多选类似autocomplete 查询选择 适用于前端开发者,也适用于程序开发人员 多选可适用很多场景,比如多用户选择等等
ng-options可以让我们更方便地将一个对象数组绑定到select元素上,并且可以设置显示对象的某个属性作为选项值和显示文本。但是,有时候在使用ng-options时,开发者可能会遇到一些问题,例如无法设置下拉列表的默认值...
3. 编写一个changeClassification函数,该函数会根据第一个select元素选中的值来动态地更新第二个select元素的数据源。 在本文实例中,我们定义了三个角色分类:软件开发、硬件开发和嵌入式开发。每个分类下又包含...
传入一个表达式来表示一个item的显示 列标题可定制 (6/3/14) 支持新属性“required-min”,它为最少数量的选定值添加表单验证。 (6/5/14) 如果提供了“标题”表达式,则评估它以显示每个项目的工具提示 (7/2/14) ...
这样修改后,当用户选择一个选项时,`$scope.filter.detectUnitId`将保存相应的`id`值,而不是之前的索引。 尝试获取选中的值,例如通过`alert($scope.filter.detectUnitId);`,就可以得到用户选择的`detectUnit`的...
文章中提到的“angularjs 实现带查找筛选功能的select下拉框实例”,涵盖了在AngularJS框架内创建一个带有筛选功能的下拉列表的实现方法,这对于开发中需要改善用户体验的场景非常有用。在以往的select元素中,对于...