angularjs checkbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{margin: 0 auto;}
.table{border: 1px solid #ccc;width:100%;}
.theader{border-bottom: 1px solid #0000ff;line-height: 40px;height:40px;}
.theader>tr>th{text-align: center;}
.tbody>tr>td{text-align: center;line-height: 40px;height:40px;}
.checkbox{
position: relative;
top:4px;
}
.checkbox input[type="checkbox"]{
display: none;
}
.checkbox em{
display: inline-block;
width:20px;
height:20px;
border: 1px solid #ddd;
} .checkbox em:after{
opacity: 0;
content: '';
position: absolute;
top:3px;
left:5px;
width:9px;
height:5px;
background: transparent;
border: 3px solid #0000ff;
border-top: none;
border-right: none;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg); } .checkbox em:after:hover{
opacity: 0.5;
} .checkbox input[type='checkbox']:checked+em:after{
opacity: 1;
} .btn{text-align: left;margin:20px;}
.btn button{width:100px;text-align: center;line-height: 40px;
background-color: chartreuse;color:#fff;border: none;}
</style>
<script src="js/angular.js"></script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="MyCtrl">
<div class="btn"><button ng-click="add()">批量上传</button></div>
<table class="table table-hover">
<thead class="theader">
<tr>
<th>
<label class="checkbox">
<input type="checkbox" ng-click="All($event)" ng-model="obj.flag">
<em></em>
</label>
</th>
<th>名称</th>
<th>商家简称</th>
<th>状态</th>
<th>开始时间</th>
<th>结束时间</th>
<th>创建时间</th>
</tr>
</thead>
<tbody class="tbody">
<tr ng-repeat="item in items">
<td>
<label class="checkbox">
<input type="checkbox" ng-checked="updata()" ng-click="PushSelect($event)" ng-model="flag">
<em></em>
</label>
</td>
<td>{{item.name}}</td>
<td>{{item.shortName}}</td>
<td>{{item.auditStateName}}</td>
<td>{{item.activityStart}}</td>
<td>{{item.activitEnd}}</td>
<td>{{item.creationTime}}</td>
</tr>
</tbody>
</table> </div>
<script>
var app = angular.module('myApp',[]);
app.controller("MyCtrl",function($scope){
$scope.objectData = {
code:"0",
data:[{
activitEnd: "2018-05-31 23:59:59",
activityAgentId: 879,
activityStart: "2018-05-17 00:00:00",
auditState: 0,
auditStateName: "未上报",
creationTime: "2018-03-19 00:00:00",
name: "坚定肩铠",
shortName: "坚定肩铠"
},{
activitEnd: "2018-05-31 23:59:59",
activityAgentId: 879,
activityStart: "2018-05-17 00:00:00",
auditState: 0,
auditStateName: "未上报",
creationTime: "2018-03-19 00:00:00",
name: "坚定肩铠",
shortName: "坚定肩铠"
},{
activitEnd: "2018-05-31 23:59:59",
activityAgentId: 879,
activityStart: "2018-05-17 00:00:00",
auditState: 0,
auditStateName: "未上报",
creationTime: "2018-03-19 00:00:00",
name: "坚定肩铠",
shortName: "坚定肩铠"
},{
activitEnd: "2018-05-31 23:59:59",
activityAgentId: 879,
activityStart: "2018-05-17 00:00:00",
auditState: 0,
auditStateName: "未上报",
creationTime: "2018-03-19 00:00:00",
name: "坚定肩铠",
shortName: "坚定肩铠"
}],
message: "成功",
pageNo: 1,
pageSize: 20,
totalItems: 11,
totalPages: 1,
};
//模拟数据
$scope.items = $scope.objectData.data;
$scope.obj = {
flag:'',
}
$scope.add = function(){ } $scope.updata = function(){ } $scope.pushSelect = function(e){ } })
</script>
</body>
</html>
angularjs checkbox的更多相关文章
- Angularjs checkbox的ng属性
angularjs 默认给 input[checkbox] 元素定制了一些属性,如: <input type="checkbox" ng-mudel="name&q ...
- AngularJS checkbox/复选框 根据缓存数据实时显示
想缓存选择按钮时,可以使用这样的方法. index.html <!DOCTYPE html> <html data-ng-app="App"> <he ...
- angularjs checkbox 框的操作
前言:今天遇到一个问题,需要对多选按钮进行操作,作为js菜鸟,只能做自己慢慢琢磨了-- <label class="checkbox-inline custom-checkbox no ...
- angularjs表单验证checkbox
angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...
- angularjs实现 checkbox全选、反选的思考
之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使. 好长时间没写代码,感觉好多都不会了. 感谢这周没有单休,我能看熬夜看奥运了.我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间 ...
- AngularJS判断checkbox/复选框是否选中并实时显示
最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: 1 <!DOCTYPE h ...
- ZH奶酪：AngularJS判断checkbox/复选框是否选中并实时显示
最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: <!DOCTYPE htm ...
- （转）AngularJS判断checkbox/复选框是否选中并实时显示
最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: <!DOCTYPE htm ...
- angularjs ng-repeat checkbox
<div class="col-md-3" ng-repeat="user in title.UserList"> <p class=&quo ...
随机推荐
- PHP日历的算法
<?php if (function_exists('date_default_timezone_set')) { date_default_timezone_set('Asia/Chongqi ...
- webform-AJAX
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集).AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着 ...
- QT https 程序运行异常
[1]问题现象描述 利用QT的https方式访问服务器,添加了libeay32.dll 和 ssleay32.dll, 且一直都使用正常. 正常现象:返回200,且该获取的值都正常返回(即replyB ...
- python str find & index 联系
[1]相同点 (1)功能:检测字符串中是否包含子字符串str (2)语法: [1] str.find(str, beg = 0, end = len(string)) [2] str.index(st ...
- java.lang.IllegalArgumentException: An invalid domain [.test.com] was specified for this cookie解决方法
当项目中使用单点登录功能时,通常会使用cookie进行信息的保存,这样就可以在多个子域名上存取用户信息. 比如有三个domain分别为test.com,cml.test.com,b.test.com这 ...
- Vim Tricks
Vim Tricks operations replace :$s/from/to/g 全文替换 :10,20s/from/to/g 从第10行开始,替换至第20行 :10,20s/from/to/g ...
- VS2015 scanf 函数报错 error C4996: 'scanf'
错误提示:error C4996: 'scanf': This function or variable may be unsafe. Consider using scanf_s instead. ...
- kettle 连接 SQL Server 异常
场景重现 新安装的 kettle(pdi-ce-7.0.0.0-25) 连接 SQL Server 2012 时报错如下: 解决办法 到 https://sourceforge.net/project ...
- jQuery validator plugin之Selector
原文 :unchecked Selector Selects all elements that are unchecked. jQuery( ":unchecked" ) Inv ...
- IdentityServer4中Code/Token/IdToken对应可访问的资源(api/identity)
{ OidcConstants.ResponseTypes.Code, ScopeRequirement.None }, { OidcConstants.ResponseTypes.Token, Sc ...