使用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 相关文章推荐
一个JS翻页效果
Jul 23 Javascript
关于Javascript模块化和命名空间管理的问题说明
Dec 06 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 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
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
python单链表实现代码实例
2013/11/21 Python
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
Python SQLite3数据库操作类分享
2014/06/10 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
python实现数字炸弹游戏程序
2020/07/17 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
行政部工作岗位职责范本
2014/03/05 职场文书
元旦晚会活动总结
2014/07/09 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
asyncio异步编程之Task对象详解
2022/03/13 Python
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang
volatile保证可见性及重排序方法
2022/08/05 Java/Android