使用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 相关文章推荐
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
原生js实现轮播图特效
May 04 Javascript
JavaScript async/await原理及实例解析
Dec 02 Javascript
JavaScript实现网页跨年倒计时
Dec 02 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制作的意见反馈表源码
2007/03/11 PHP
php Smarty初体验二 获取配置信息
2011/08/08 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
轻轻松松学习JavaScript
2007/02/25 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
Python进程间通信用法实例
2015/06/04 Python
Python实现简单的代理服务器
2015/07/25 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
python pygame实现球球大作战
2019/11/25 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
企业厂长岗位职责
2013/12/17 职场文书
财务方面个人工作的自我评价
2013/12/28 职场文书
补充协议书范本
2014/04/23 职场文书
校园元旦活动总结
2014/07/09 职场文书