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实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
php中socket的用法详解
2014/10/24 PHP
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
python pillow模块使用方法详解
2019/08/30 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
后勤人员岗位职责
2013/12/17 职场文书
员工拾金不昧表扬信
2014/01/09 职场文书
违反学校规定检讨书
2014/01/18 职场文书
法制宣传教育方案
2014/05/09 职场文书
创先争优标语
2014/06/27 职场文书
医学专业大学生求职信
2014/07/12 职场文书
辩护词范文大全
2015/05/21 职场文书
单位考核鉴定意见
2015/06/05 职场文书
运动员入场词
2015/07/18 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers