你好,游客 登录 注册 搜索
背景:
阅读新闻

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

[日期:2017-07-24] 来源:Linux社区  作者:muyunren [字体: ]

最近在做项目时,遇到了需要用到多选按钮选中触发事件的功能,因此我查找了一下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相关文章链接

AngularJS权威教程 清晰PDF版  http://www.linuxidc.com/Linux/2015-01/111429.htm

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

  1. 带你走近AngularJS - 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 带你走近AngularJS - 创建自定义指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中对控制器进行单元测试 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 应用中通过 JSON 文件来设置状态 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 http://www.linuxidc.com/Linux/2014-07/104402.htm

AngularJS入门之动画  http://www.linuxidc.com/Linux/2017-01/139198.htm

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

本文永久更新链接地址http://www.linuxidc.com/Linux/2017-07/145846.htm

linux
相关资讯       AngularJS 
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款