使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解

时间:2021-05-25

最近在做项目时,遇到了需要用到多选按钮选中触发事件的功能,因此我查找了一下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编写多选按钮选中时触发指定方法的指令代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章