使用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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
想用好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
dedecms中常见问题修改方法总结
2007/03/21 PHP
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
php通过各种函数判断0和空
2020/07/04 PHP
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
python if not in 多条件判断代码
2016/09/21 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
化工工艺专业求职信
2013/09/22 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
钱学森电影观后感
2015/06/04 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
门面租赁合同范文
2019/08/06 职场文书
七年级作文之游记
2019/12/11 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python