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

原创 2016年08月28日 21:54:46

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

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

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

代码:

<!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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

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

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

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

简单的下拉多选angularjs 实现

(function ( angular ) { ‘use strict’;angular.module( 'angularMultiSelect', [] ).directive("mult...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

angularjs popup-table 弹出框表格指令

//表格处理 app.directive('popupTable', ['$http', '$rootScope', '$cookies', '$location', function ($http,...

angular 全局confirm确认框

全局确认框是在弹出模态框的基础上修改的。

angularjs 弹出框 $modal

$modal只有一个方法:open,该方法的属性有: templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用域为模态的内容使用(...

angularjs 多选下拉框 控件angularjs ui-select2

angularjs-dropdown-multiselect这个控件,简直太强大了,支持定制多种风格的,多选下拉框,可以加搜索框,可以全选/全不选等等,而且集成也是相当的方便.    小例子参考:原文...

自定义Adapter、全选、反选、checkbox、

package com.example.administrator.myweidget.adapter;import android.util.Log; import android.view.Lay...

多个checkbox全选和获取已选择的checkbox的demo以及自定义属性的使用

在多个checkbox存在的时候,做个全选的checkbox。只要这个checkbox选中那么其他的checkbox自动被选中。然后获取被选中的checkbox。 这个过程中需要自定义一个属性来区别...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Angular实现一个简单的多选复选框的弹出框指令
举报原因:
原因补充:

(最多只允许输入30个字)