免费抠图软件_图片加文字_在线制作拼图的网站_图片处理神器_在线抠图 免费
当前位置:建站首页 > 新闻资讯 > 网站建设 >

小程序登录页面_Angular完成一个简略的多选复选框

发表日期:2021-01-12 11:47文章编辑:jianzhan浏览次数: 标签:    

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实现一个简单的多选复选框的弹出框指令实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。


返回列表
相关新闻