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 相关文章推荐
清除div下面的所有标签的方法
Feb 17 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
如何通过JS实现日历简单算法
Oct 14 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中$_FILES的使用以及注意事项
2013/07/05 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
详解Python发送邮件实例
2016/01/10 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python 实现return返回多个值
2019/11/19 Python
Python新手学习raise用法
2020/06/03 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
校园安全广播稿
2014/02/08 职场文书
超市国庆节促销方案
2014/02/20 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
MySQL通过binlog恢复数据
2021/05/27 MySQL
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python