关闭

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

标签: angular下拉框多选复选框指令
1490人阅读 评论(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网站的观点或立场
    个人资料
    • 访问:235360次
    • 积分:3433
    • 等级:
    • 排名:第9778名
    • 原创:150篇
    • 转载:20篇
    • 译文:1篇
    • 评论:22条
    最新评论