使用AngularJS编写多选按钮选中时触发指定方法的

最近在做项目时,遇到了需要用到多选按钮选中触发事件的功能,因此我查找了一下AngularJS的提供的指令,但是没有发现相应的指令。而一个看起来很像的指令就是ng-checked,但是这个指令是用来代替标签里面checked属性的,所以也用不了。因此我就自己动手试着写一个这样的指令,相应的代码如下:

<form ng-controller="TestCtrl">
  <input type="checkbox" ng-model="a" 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相关文章链接

AngularJS权威教程 清晰PDF版 

希望你喜欢,并分享我的工作~带你走近AngularJS系列

带你走近AngularJS - 基本功能介绍

带你走近AngularJS - 体验指令实例

带你走近AngularJS - 创建自定义指令

如何在 AngularJS 中对控制器进行单元测试

在 AngularJS 应用中通过 JSON 文件来设置状态

AngularJS 之 Factory vs Service vs Provider

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据

AngularJS入门之动画 

AngularJS 的详细介绍请点这里
AngularJS 的下载地址请点这里

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/c97200fd91f0d8c6df5747c60af6f396.html