使用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 相关文章推荐
jquery 事件执行检测代码
Dec 09 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 Javascript
vue 导出文件,携带请求头token操作
Sep 10 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
深入extjs与php参数交互的详解
2013/06/25 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
javascript hashtable实现代码
2009/10/13 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
python中列表元素连接方法join用法实例
2015/04/07 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
英国二手物品交易网站:Preloved
2017/10/06 全球购物
党员公开承诺践诺书
2014/03/25 职场文书
汽车专业求职信
2014/06/05 职场文书
资金申请报告范文
2015/05/14 职场文书
公司借款担保书
2015/09/22 职场文书
教师外出学习心得体会
2016/01/18 职场文书
MySQL慢查询优化解决问题
2022/03/17 MySQL