justforuse的博客

什么都懂一点,生活更多彩一些 http://justforuse.github.io/

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

阅读更多
版权声明:转载请附上原文链接,谢谢;侵删。 https://blog.csdn.net/u014291497/article/details/52348139
个人分类: AngularJS
想对作者说点什么? 我来说一句

单选多选列表弹出框

2015年06月26日 477KB 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭