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

发布时间：2020-12-17 10:00:03 所属栏目：安全来源：网络整理

导读：之前的文章有写过包含树结构下拉框的。要实现一个包含多个复选框的下拉框该如何做呢？先上个效果图吧：代码： !DOCTYPE html html ng-app = "app" head meta charset = "UTF-8" title / title link rel = "stylesheet" type = "text/css" href = "../boot

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

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

先上个效果图吧：

代码：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!