Angular如何实现多选复选框的弹出框指令
短信预约 -IT技能 免费直播动态提醒
这篇文章将为大家详细讲解有关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" rel="external nofollow" >
<script class="lazy" data-src="../jquery.js"></script>
<script class="lazy" data-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 class="lazy" data-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>关于“Angular如何实现多选复选框的弹出框指令”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
