之前的文章有写过包含树结构下拉框的。
要实现一个包含多个复选框的下拉框该如何做呢？
先上个效果图吧：
代码：
<!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
