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

来源：互联网发布：js后退页面同时刷新编辑：程序博客网时间：2024/05/01 20:15

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

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

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

代码：

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