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 ...
随机推荐
- workman项目设置开机自启动
https://blog.csdn.net/xxq929604980/article/details/78558317 http://man.linuxde.net/chkconfig 1.脚本编写 ...
- C#设计模式(2)——简单工厂模式（转）
C#设计模式(2)——简单工厂模式 一.引言 这个系列也是自己对设计模式的一些学习笔记,希望对一些初学设计模式的人有所帮助的,在上一个专题中介绍了单例模式,在这个专题中继续为大家介绍一个比较容易理 ...
- Kafka笔记2（安装）
1.安装java 2.安装zookeeper 3.安装kafka Broker 测试:发布消息 测试:读取消息 4,broker配置 常规配置: broker.id: 默认0 每个broker都需要 ...
- SQL Server 百万级数据提高查询速度的方法（转）
1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引而进行全表扫描.2.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及 ...
- JS关键字和保留字汇总(小记)
ECMA-262 描述了一组具有特定用途的关键字.这些关键字可用于表示控制语句的开始或结束,或者用于执行特定操作等.按照规则,关键字也是语言保留的,不能用作标识符.以下就是ECMAScript的全部关 ...
- C#:进程
using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...
- Delphi文件目录操作（转载）
Delphi判断文件夹(目录)是否存在,不存在就创建一个,可以一次创建多级目录 procedure TForm1.Button1Click(Sender: TObject);begin if not ...
- CSRF（Cross Site Request Forgery, 跨站域请求伪造）
CSRF(Cross Site Request Forgery, 跨站域请求伪造) CSRF 背景与介绍 CSRF(Cross Site Request Forgery, 跨站域请求伪造)是一种网络的 ...
- Java 多重catch语句的具体使用介绍
某些情况,由单个代码段可能引起多个异常.处理这种情况,你可以定义两个或更多的catch子句,每个子句捕获一种类型的异常.当异常被引发时,每一个catch子句被依次检查,第一个匹配异常类型的子句执行.当 ...
- MongoDB 之 你得知道MongoDB是个什么鬼 MongoDB - 1
最近有太多的同学向我提起MongoDB,想要学习MongoDB,还不知道MongoDB到底是什么鬼,或者说,知道是数据库,知道是文件型数据库,但是不知道怎么来用 那么好,所谓千呼万唤始出来,现在我就拉 ...