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实现一个简单的多选复选框的弹出框指令实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS实现全选反选功能

    AngularJS实现全选反选功能

    AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. 这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: <!DOCTYPE html> <html lang="en&quo

  • Angular.js实现多个checkbox只能选择一个的方法示例

    Angular.js实现多个checkbox只能选择一个的方法示例

    首先来看看效果 效果 实现这样的效果,必须使用指令了,只有使用指令才能单独控制每一个scope. 示例代码如下: <div class="form-group"> <label class="col-sm-2 control-label">请选择文章主题色彩</label> <div class="col-sm-10" theme-group> <label class="i-swi

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

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

    之前的文章有写过包含树结构下拉框的. 要实现一个包含多个复选框的下拉框该如何做呢? 先上个效果图吧: 代码: <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css"

  • Android 多种简单的弹出框样式设置代码

    Android 多种简单的弹出框样式设置代码

    简介 这是一个基于AlertDialog和Dialog这两个类封装的多种弹出框样式,其中提供各种简单样式的弹出框使用说明.同时也可自定义弹出框. 项目地址:http://www.github.com/jjdxmashl/jjdxm_dialogui 特性 1.使用链式开发代码简洁明了 2.所有的弹出框样式都在DialogUIUtils这个类中完成,方便查阅方法 3.可以自定义弹出框字体样式 4.简单的类似加载框的样式可以支持两种主题更改默认白色和灰色 截图 demo下载 demo apk下载 D

  • WPF实现带全选复选框的列表控件

    WPF实现带全选复选框的列表控件

    本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中"全选"时,列表中所有的项目都会被选中:反之,取消选中"全选"时,所有项都会被取消勾选. 在列表中选中部分数据项目时,"全选"框会呈现不确定状态(Indetermine). 由此看出,"全选"复选框与列表项中的复选框达到了双向控制的效果. 其设计思路:首先,创建自定义

  • jquery实现一个简单好用的弹出框

    jquery实现一个简单好用的弹出框

    自己改写一些jquery的部分代码,自己总结出来一个比较好用的jquery弹出框,留着以后工作时候再用.喜欢就拿走吧! 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • Flutter 超实用简单菜单弹出框 PopupMenuButton功能

    Flutter 超实用简单菜单弹出框 PopupMenuButton功能

    相信在实际开发过程当中,肯定少不了这样的功能: 点击 AppBar 右上角的按钮,弹出一个菜单供用户选择. 幸运的是,Flutter 提供给我们了一个 Widget,直接就能实现如上的效果. PopupMenuButton 还是老规矩,先看官方的说明: Displays a menu when pressed and calls onSelected [1] when the menu is dismissed because an item was selected. The value pa

  • Django使用消息提示简单的弹出个对话框实例

    1.下面就来介绍一下如何简单的显示一个消息提示,好像js可以控制,不过这里用了django.contrib.messages这个库 2.首先呢,在项目的settings.py有默认配置一个django.contrib.messages的相关信息: INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'd

  • vue实现简单的登录弹出框

    本文实例为大家分享了vue实现简单的登录弹出框的具体代码,供大家参考,具体内容如下 初学vue框架,小小的写了一个登录弹出框效果 各路大佬多多指教. 不多废话,直接上代码: CSS: *{margin:0;padding:0;} /*登陆按钮*/ #app{ width:140px; height:36px; margin:10px auto; } #login,#login a{ width: 200px; height: 38px; line-height:38px; text-align:

  • 移动端 一个简单易懂的弹出框

    移动端 一个简单易懂的弹出框

    先给大家展示下效果图,如果大家感觉还不错,请继续参考实现代码. 关键代码如下所示: function tishi(content,url) { var html = '<div class="xiaoxi none" id="msg" style="z-index:9999;left: 5%;width: 90%;position: fixed;background:none;top:50%;"> <p class="

  • Android 简单的弹出框(在屏幕中间,传string[],根据内容框框大小自适应)

    Android 简单的弹出框(在屏幕中间,传string[],根据内容框框大小自适应)

    先给大家展示效果图: 实现代码也很简单,代码如下所示: private void showLabelAlert() { new AlertDialog.Builder(上下文) .setTitle("选择标签") .setItems(addressLabels, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { if (wh

  • 全选复选框JavaScript编写小结（附代码）

    对于全选框的操作分为两种情况: 1.单击全选框,下面全部选中 2.单击下面的复选框,全部点击上,全选框被选中,否则全选框没有选中. html样式 <tr> <td>爱  好</td> <td> <label for=""><input type="checkbox" name="fav" id="" value="苹果" class=&quo

随机推荐