Angular实现一个简单的多选复选框的弹出框指令实例     投稿：jingxian   下面小编就为大家带来一篇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 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();

 label for="{{'check_' + $index}}" ng- ng-repeat = "item in data" 
 //为不同的选项定义不同的id
 input id="{{'check_' + $index}}" type="checkbox" ng-model="data[$index].select" 
 {{item.name}}
 /label 

以上这篇Angular实现一个简单的多选复选框的弹出框指令实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持凡科。