这篇文章将为大家详细讲解有关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(); }); $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如何实现多选复选框的弹出框指令”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。