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 ...
随机推荐
- OAuth2认证和授权：ClientCredentials认证
1:创建授权服务器项目:AuthorizationServer,添加包:IdentityServer4 2:创建资源服务器项目:ResourcesServer,添加包:IdentityServer4. ...
- PHP----------file_get_content获取不到页面信息
1.将网址在页面上打开可以正常访问,但是用file_get_content请求则访问不到.这个是因为对方挡住了非浏览器访问导致的.需要改下php配置,模拟浏览器访问. user_agent=" ...
- 富文本之BootStrap-wysiwyg 带图片上传功能
BootStrap-wysiwyg插件具有良好的编辑功能和展示效果. 一.使用方法在网上有很多,在此记录自己使用过程中的一些问题和解决方式. 相关依赖: bootstrap-wysiwyg.js (核 ...
- 如何为 SpringMVC 编写单元测试：普通 Controller 测试(转)
前一篇文章我们已经知道如何配置使用了 SpringMVC 测试框架的单元测试. 现在我们就该亲身实践下如何为普通 Controller 编写单元测试了. 接下来一个很明显的问题就是: 什么是普通 Co ...
- TheFatRat一般使用
利用它生成后门 第一种通常情况下速度很快,较稳定,但免杀效果极差 推荐使用第二种 免杀效果好,如下图 第一种是最新的模块,较免杀效果极好.还可伪造图标 第二种是旧的
- javascript DOM 常用方法
前端HTML+CSS+JS流程导图:https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c HTML+CSS+Javascript+j ...
- DataTables页面列点击排序
<!-- DataTables --> <script type="text/javascript" charset="utf8" src=& ...
- 《CSS世界》读书笔记（十）
<!-- <CSS世界>张鑫旭著 --> 温和的padding属性 因为默认的box-sizing是content-box,所以使用padding会增加元素的尺寸. 尺寸表现对 ...
- MySQL5.7 Dockerfile
#Dockerfile for mysql5.7 FROM centos COPY ["src","/src"] RUN groupadd -g 1003 my ...
- ACM题集以及各种总结大全（转）
ACM题集以及各种总结大全! 虽然退役了,但是整理一下,供小弟小妹们以后切题方便一些,但由于近来考试太多,顾退役总结延迟一段时间再写!先写一下各种分类和题集,欢迎各位大牛路过指正. 一.ACM入门 关 ...