使用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 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
js 动态校验开始结束时间的实现代码
May 25 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
Sony CFR 320 修复改造
2020/03/14 无线电
一个简单的域名注册情况查询程序
2006/10/09 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
php教程之phpize使用方法
2014/02/12 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
js GridView 实现自动计算操作代码
2009/03/25 Javascript
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
python动态视频下载器的实现方法
2019/09/16 Python
Django 自定义分页器的实现代码
2019/11/24 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
安全标准化汇报材料
2014/02/03 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
什么是SOLID
2022/03/24 Javascript
Go语言怎么使用变长参数函数
2022/07/15 Golang
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript