使用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语言结构小记(一)
Sep 10 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
js实现多图左右切换功能
Aug 04 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
微信小程序排坑指南详解
May 23 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 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 大数据量及海量数据处理算法总结
2011/05/07 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
js 获取服务器控件值的代码
2010/03/05 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
python Celery定时任务的示例
2018/03/13 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
房务中心文员岗位职责
2014/04/16 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
音乐研修感悟
2015/11/18 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记