Angular实现一个简单的多选复选框的弹出框指令实例


Posted in Javascript onApril 25, 2017

之前的文章有写过包含树结构下拉框的。

要实现一个包含多个复选框的下拉框该如何做呢?

先上个效果图吧:

Angular实现一个简单的多选复选框的弹出框指令实例

代码:

<!DOCTYPE html>
<html ng-app="app">

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css" rel="external nofollow" >
  <script src="../jquery.js"></script>
  <script src="../bootstrap/js/bootstrap.js"></script>
  <style type="text/css">
  label {
    display: block;
    margin-top: 3px;
  }

  label.list:hover {
    cursor: pointer;
    background-color: red;
  }

  label.selected {
    background-color: red;
  }
  </style>
  <script src="../angular.js"></script>
  <script type="text/javascript">
  angular.module("app", [])
    .controller("ctrl", function($scope) {
      jQuery(".dropdown-menu *").click(function(e){
        e.stopPropagation();
      });


      $scope.selectList = [{
        name: "选项1",
        value: "item1",
        select: false
      }, {
        name: "选项2",
        value: "item2",
        select: true
      }];
      $scope.$watch("selectList", function(n, o) {

        $scope.result = (function(arr) {
          var t = [];
          for (var i = 0; i < arr.length; i++) {
            if (arr[i].select) {
              t.push(arr[i].name);
            }
          }
          if (!t.length) {
            t.push("--请选择--");
          }
          return t.join(",");
        })($scope.selectList);
      }, true)

    })
    .directive("multiSelect", function() {
      return {
        scope: {
          data: "=multiSelect"
        },
        templateUrl: "option.html"
      }
    })
  </script>
</head>

<body>
  <div ng-controller="ctrl">

    <div class="dropdown">
      <span class="dropdown-toggle", data-toggle="dropdown">
        <button ng-bind="result"> </button>
        <span class="caret"></span>
      </span>
      <ul class="dropdown-menu">
        <li>
          //下拉框数据绑定
          <div multi-select="selectList"></div>
        </li>
      </ul>
    </div>

  </div>
</body>

</html>

指令模版代码option.html:

<label for="{{'check_' + $index}}" ng-class="{list:true, selected:data[$index].select}" ng-repeat = "item in data">
  //为不同的选项定义不同的id
  <input id="{{'check_' + $index}}" type="checkbox" ng-model="data[$index].select">
  {{item.name}}

</label>

以上这篇Angular实现一个简单的多选复选框的弹出框指令实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 Javascript
使用vant的地域控件追加全部选项
Nov 03 Javascript
前端vue如何使用高德地图
Nov 05 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 #Javascript
Javascript中click与blur事件的顺序详析
Apr 25 #Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 #Javascript
ES6中Math对象新增的方法实例详解
Apr 25 #Javascript
jquery.form.js异步提交表单详解
Apr 25 #jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 #jQuery
深入理解Javascript中的作用域链和闭包
Apr 25 #Javascript
You might like
PHP 程序员的调试技术小结
2009/11/15 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
非常漂亮的JS代码经典广告
2007/10/21 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
pandas.cut具体使用总结
2019/06/24 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
Python selenium的基本使用方法分析
2019/12/21 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
市政施工员自我鉴定
2014/01/15 职场文书
党日活动总结
2014/05/07 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
颐和园的导游词
2015/01/30 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android