关闭

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

标签: angular下拉框多选复选框指令
2267人阅读 评论(0) 收藏 举报
分类:

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

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

先上个效果图吧:
这里写图片描述

代码:

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

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css">
    <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>




此文档的作者:justforuse
Github Pages:justforuse

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

AngularJS进阶(五)Angular实现下拉菜单多选

Angular实现下拉菜单多选 写这篇文章时,引用文章地址如下: http://ngmodules.org/modules/angularjs-dropdown-multiselect http...
  • sunhuaqiang1
  • sunhuaqiang1
  • 2015-09-11 18:46
  • 61504

简单的下拉多选angularjs 实现

(function ( angular ) { ‘use strict’;angular.module( 'angularMultiSelect', [] ).directive("mult...
  • quanhongcan
  • quanhongcan
  • 2017-05-18 14:00
  • 1785

2017最佳经典之作-AngularJs 中select 下拉多选

1.问题:在AngularJs前台页面中 实现下拉多选问题 2.解析:checkbox 多选框,ng-repeat="user in users" 3.解决方案: class="row ...
  • u013758456
  • u013758456
  • 2017-07-25 20:28
  • 1485

AngularJS进阶(五)Angular实现下拉菜单多选

Angular实现下拉菜单多选 写这篇文章时,引用文章地址如下: http://ngmodules.org/modules/angularjs-dropdown-multiselect ...
  • weixin_36065510
  • weixin_36065510
  • 2017-06-17 00:53
  • 1692

angularJs 实现checkbox全选和多选

/>                                 Title       ...
  • u012226347
  • u012226347
  • 2015-08-04 15:52
  • 7603

简单的下拉多选angularjs 实现

(function ( angular ) { ‘use strict’;angular.module( 'angularMultiSelect', [] ).directive("mult...
  • quanhongcan
  • quanhongcan
  • 2017-05-18 14:00
  • 1785

Extjs 4 带checkbox框的下拉多选选框

Extjs 4 带checkbox框的下拉多选选框,多选框的默认值显示
  • qq_34117825
  • qq_34117825
  • 2016-10-09 14:52
  • 3427

JAVA组件大全复选框,选项按钮,复选方框,下拉式列表的使用介绍

7-1:使用JCheckBox组件: 类层次结构图:    java.lang.Object      --java.awt.Component       --java.awt.Contai...
  • qq_30175203
  • qq_30175203
  • 2015-10-08 21:03
  • 3353

Extjs5实现带复选框的多选下拉选,复选框用extjs提供的checkbox样式

因为网上现有的代码只是实现了复选框效果,在我把窗口关闭后,再打开,复选框还保留着上次的选中状态,因为有这个bug,所以自己把网上的代码给改进了下,加入了未选中事件和用extjs的样式,先上效果图 看...
  • hanzi198511
  • hanzi198511
  • 2016-09-18 10:30
  • 414

实现带复选框的下拉列表

最近在项目中有遇到需要带复选框的下拉列表,找了好久都没找到相关资料,只好自己用jQuery+css实现了一个简单的小demo,虽然有点丑,但效果基本实现了,大家将就着看吧。 注:(以下代码为本人自己...
  • guxin_duyin
  • guxin_duyin
  • 2017-04-16 10:54
  • 1896
    个人资料
    • 访问:455496次
    • 积分:5205
    • 等级:
    • 排名:第6152名
    • 原创:177篇
    • 转载:22篇
    • 译文:1篇
    • 评论:46条
    最新评论