使用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编写多选按钮选中时触发指定方法的指令代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • angular6.x中ngTemplateOutlet指令的使用示例

    angular6.x中ngTemplateOutlet指令的使用示例

    本篇文章主要介绍了angular6.x中ngTemplateOutlet指令的使用示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 浅谈angular.js跨域post解决方案

    浅谈angular.js跨域post解决方案

    本篇文章主要介绍了浅谈angular.js跨域post解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 深入理解Angularjs向指令传递数据双向绑定机制

    深入理解Angularjs向指令传递数据双向绑定机制

    这篇文章主要深入的给大家介绍了Angularjs向指令传递数据,双向绑定机制的相关资料,需要的朋友可以参考下
    2016-12-12
  • js常用正则表达式集锦

    js常用正则表达式集锦

    这篇文章主要介绍了js常用正则表达式集锦,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Angular.js实现获取验证码倒计时60秒按钮的简单方法

    Angular.js实现获取验证码倒计时60秒按钮的简单方法

    最近做项目的时候又遇到了验证码倒计时的需求,发现这个功能还是挺实用的,所以就想着总结一下,下面这篇文章主要给大家介绍了关于利用Angular.js如何实现获取验证码倒计时按钮的简单方法,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-10-10
  • Angular统一注入器unified injector简化依赖关系管理

    Angular统一注入器unified injector简化依赖关系管理

    这篇文章主要为大家介绍了Angular统一注入器unified injector简化依赖关系管理的使用方法实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • Angular.JS去掉访问路径URL中的#号详解

    Angular.JS去掉访问路径URL中的#号详解

    最近天天都在用AngularJS,各类文档也都看过好几遍,但总是些编程上的事找不到优雅的解决办法。今天终于把AngularJS的项目访问路径URL里的#号去掉了,这个问题不见得有多难,关键是花多长时间去理解AngularJS框架本身,下面来看看详细介绍,需要的朋友可以参考下。
    2017-03-03
  • Angular6笔记之封装http的示例代码

    Angular6笔记之封装http的示例代码

    这篇文章主要介绍了Angular6笔记之封装http的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)

    Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)

    这篇文章主要介绍了Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码),需要的朋友可以参考下
    2017-10-10
  • AngularJS学习笔记之TodoMVC的分析

    AngularJS学习笔记之TodoMVC的分析

    这篇文章主要介绍了AngularJS学习笔记之TodoMVC的分析的相关资料,需要的朋友可以参考下
    2015-02-02

最新评论