使用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 GUID生成器实现代码
Oct 31 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
vue 把二维或多维数组转一维数组
Apr 24 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
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
python中字典(Dictionary)用法实例详解
2015/05/30 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
python代码区分大小写吗
2020/06/17 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
Ajax请求总共有多少种Callback
2016/07/17 面试题
高级护理专业大学生求职信
2013/10/24 职场文书
仓库管理专业个人的自我评价
2013/12/30 职场文书
校三好学生主要事迹
2014/01/11 职场文书
政府门卫岗位职责
2014/04/29 职场文书
三严三实对照检查材料
2014/08/25 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
介绍信怎么写
2015/01/30 职场文书