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 正则表达式相关应介绍
Nov 27 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 Javascript
如何用JavaScipt测网速
May 09 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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
PHP4之真OO
2006/10/09 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
最短的IE判断代码
2011/03/13 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
如何做好总经理助理
2013/11/12 职场文书
学院书画协会部门岗位职责
2013/12/01 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python