使用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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
openlayers实现图标拖动获取坐标
Sep 25 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调用MySQL的存储过程的实现代码
2008/08/12 PHP
PHP中用hash实现的数组
2011/07/17 PHP
PHP 文件系统详解
2012/09/13 PHP
PHP运行模式的深入理解
2013/06/03 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
Python KMeans聚类问题分析
2018/02/23 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
推广普通话主题班会
2015/08/17 职场文书
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server