使用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 面向对象全新理练之原型继承
Dec 03 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
js验证上传图片的方法
May 12 Javascript
js解决movebox移动问题
Mar 29 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 Javascript
微信小程序文章详情功能完整实例
Jun 03 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/01/03 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
PHP静态文件生成类实例
2014/11/29 PHP
详解PHP中的PDO类
2015/07/06 PHP
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
Python函数参数分类原理详解
2020/05/28 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
学生打架检讨书
2014/02/14 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
小学家长意见怎么写
2015/06/03 职场文书
团结主题班会
2015/08/13 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle