Angular实现一个简单的多选复选框的弹出框指令实例
程序员文章站
2022-05-26 09:33:51
之前的文章有写过包含树结构下拉框的。
要实现一个包含多个复选框的下拉框该如何做呢?
先上个效果图吧:
代码:
之前的文章有写过包含树结构下拉框的。
要实现一个包含多个复选框的下拉框该如何做呢?
先上个效果图吧:
代码:
<!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实现一个简单的多选复选框的弹出框指令实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
推荐阅读
-
Angular实现一个简单的多选复选框的弹出框指令实例
-
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
-
jquery编程开发中如何实现一个简单好用的弹出框
-
thinkPHP删除前弹出确认框的简单实现方法_php实例
-
Angular实现一个简单的多选复选框的弹出框指令实例
-
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
-
一个简单的实现下拉框多选的插件可移植性比较好_jquery
-
一个简单的实现下拉框多选的插件可移植性比较好_jquery
-
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框_AngularJS
-
jquery实现一个简单好用的弹出框_jquery