使用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程序 入门者学习
Jul 09 Javascript
Javascript isArray 数组类型检测函数
Oct 08 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
AJAX学习笔记
May 18 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
在字符串中把网址改成超级链接
2006/10/09 PHP
常用的php对象类型判断
2008/08/27 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
JavaScript Split()方法
2015/12/18 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
Python中的匿名函数使用简介
2015/04/27 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python版本单链表实现代码
2018/09/28 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
python map比for循环快在哪
2020/09/21 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
初中女生自我鉴定
2013/12/19 职场文书
小学科学教学反思
2014/01/26 职场文书
淘宝活动策划方案
2014/02/06 职场文书
2014年计生标语
2014/06/23 职场文书
2014年度安全工作总结
2014/12/04 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers