使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解


Posted in Javascript onJuly 24, 2017

最近在做项目时,遇到了需要用到多选按钮选中触发事件的功能,因此我查找了一下AngularJS的提供的指令,但是没有发现相应的指令。而一个看起来很像的指令就是ng-checked,但是这个指令是用来代替标签里面checked属性的,所以也用不了。因此我就自己动手试着写一个这样的指令,相应的代码如下:

<form name="test_form" ng-controller="TestCtrl">
<input type="checkbox" name="a" ng-model="a" id="check" ng-checking="say()"/>
<label for="check">{{ a }}</label>
</form>
var app = angular.module('Demo',[]);
app.directive('ngChecking',function(){
var fun1 = function(element,attrs){
return function(scope,iElement,iAttrs){
scope.$watch('a',function(){
if(iElement[0].checked){
if(iAttrs['ngChecking']){   
var fun = iAttrs['ngChecking'].match(/\w+()/g);
scope[fun[0]]();
}
}
})
}
}
return {
compile:fun1,
restrict:'AE'
}
})
app.controller('TestCtrl',function($scope){
$scope.say = function(){
alert(123)
}
});
angular.bootstrap(document,['Demo']);

总结

以上所述是小编给大家介绍的使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript浏览器选项卡效果
Aug 25 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
js实现车辆管理系统
Aug 26 Javascript
JavaScript 对象创建的3种方法
Nov 17 Javascript
想用好React的你必须要知道的一些事情
Jul 24 #Javascript
利用node.js实现反向代理的方法详解
Jul 24 #Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 #Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 #Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 #Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 #Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 #Javascript
You might like
php查看session内容的函数
2008/08/27 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
js 实现碰撞检测的示例
2020/10/28 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
python 内置模块详解
2019/01/01 Python
python aiohttp的使用详解
2019/06/20 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
师范应届毕业生自荐信
2013/11/18 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
网页美工求职信范文
2014/04/17 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
捐款仪式主持词
2015/07/04 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
SpringBoot快速入门详解
2021/07/21 Java/Android
Redis入门基础常用操作命令整理
2022/06/01 Redis