使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
更新时间：2017年07月24日 11:03:12 投稿：mrr
最近做项目时遇到了需要用到多选按钮选中触发事件的功能，小编试着手写一个指令，具体实现代码大家参考下本文吧
最近在做项目时，遇到了需要用到多选按钮选中触发事件的功能，因此我查找了一下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编写多选按钮选中时触发指定方法的指令代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了AngularJS创建自定义指令的方法,详细的分析了自定义指令的原理、实现步骤、实现方法与相关注意事项,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了AngularJS实现Input格式化的方法,结合实例形式分析了AngularJS实现Input格式化的操作步骤与相关注意事项,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了解决ionic和angular上拉加载的问题,需要的朋友可以参考下2017-08-08
angularJs中跳转到指定的锚点实例($anchorScroll)
今天小编就为大家分享一篇angularJs中跳转到指定的锚点实例($anchorScroll)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了9种改善AngularJS性能的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了什么是 AngularJS？AngularJS简介,本文讲解了AngularJS方方面面的基础知识,AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件,需要的朋友可以参考下2014-12-12
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
最近做项目时遇到了需要用到多选按钮选中触发事件的功能，小编试着手写一个指令，具体实现代码大家参考下本文吧2017-07-07
本篇文章主要介绍了ionic+AngularJs实现获取验证码倒计时按钮，具有一定的参考价值，有兴趣的可以了解一下。2017-04-04
angularjs封装bootstrap时间插件datetimepicker
这篇文章主要介绍了angularjs封装bootstrap时间插件datetimepicker 的相关资料,需要的朋友可以参考下2016-06-06
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
TinyMCE是一个轻量级的富文本编辑器，相对于CK编辑器更加精简，但必须满足绝大部分场景的需要。这篇文章主要介绍了Angular5整合富文本编辑器TinyMCE（汉化+上传）的相关知识,需要的朋友可以参考下2020-05-05
最新评论