使用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实现自定义对话框的代码
Jun 15 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
php实现水仙花数示例分享
2014/04/03 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
详解Python中最难理解的点-装饰器
2017/04/03 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
python 公共方法汇总解析
2019/09/16 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
几个常见的消息中间件(MOM)
2014/01/08 面试题
优秀学生干部个人的自我评价
2013/10/04 职场文书
代办委托书怎样写
2014/04/08 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
小学生家长意见
2015/06/03 职场文书
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android