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 ...
随机推荐
- Python3.0以上版本在对比图片相似中的应用
首先声明一下,代码是从网上找到的,只是本人作以简单的修改. 请大家尊重原创. 我本地用到的是 Python 3.4 以及 Pillow (4.0.0) 第三方包. 方法一. #!/usr/bin ...
- Java课程总结
预备作业一 简要内容:我期望的师生关系 预备作业二 简要内容:学习基础和C语言基础调查 预备作业三 简要内容:Linux安装及学习 第一周作业 简要内容:Java入门 第二周作业 简要内容:学习基本数 ...
- Python 互斥锁
互斥锁Mutex的使用 多个线程处理共享数据,数据会出现问题: 2.7之前每100指令切换一次GIL锁,线程就会sleep,线程会把前100条处理指令存放在CPU缓存内,切换GIL锁后放入另外一个线程 ...
- C#使用NPOI导出Excel
当记录数超出65536时,有两种方式处理: 一是调用WriteToDownLoad65536方法建立多个Excel. 二是调用WriteToDownLoad方法在同一个Excel中建多个Sheet. ...
- FL Studio的模式剪辑是什么？
FL Studio里的模式剪辑功能里,有一个模式菜单.模式剪辑菜单和模式选择器面板.模式可以作为模式剪辑放置在播放列表中,模式剪辑的名称显示在剪辑的标题栏中.(注意:模式注释和事件自动化可以共享相同的 ...
- Paper Read: Convolutional Image Captioning
Convolutional Image Captioning 2018-11-04 20:42:07 Paper: http://openaccess.thecvf.com/content_cvpr_ ...
- Bytom合约预编译
比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 在开发合 ...
- winform左右滑动
public static class FormTransform { public static void TransformSize(Form frm, int newWidth, int new ...
- Hadoop EC 踩坑 ：data block 缺失导致的 HDFS 传输速率下降
环境:hadoop-3.0.2 + 11 机集群 + RS-6-3-1024K 的EC策略 状况:某天,往 HDFS 上日常 put 业务数据时,发现传输速率严重下降 分析: 检查集群发现,在之前的传 ...
- redis 配置初体验
下载redis 1.新增start.bat 编辑redis-server redis.windows.conf 2..改动redis.windows.conf配置文件改动password:找到例如以下 ...