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 ...
随机推荐
- Linux下安装pymysql
直接使用pip进行安装: [root@mycentos ~]#pip install pymysql
- python dict的函数
1. dict.clear() 删除字典内所有元素 2. dict.copy() 返回一个字典的浅复制 3. dict.fromkeys(seq[, val]) 创建一个新字典,以序列 seq 中元素 ...
- cocos2d-x JS 重力感应监听事件
说明 : 下面监听中的 acc属性 里面有很多可以使用的值 . 添加监听 : cc.inputManager.setAccelerometerEnabled(true); cc.eventManage ...
- 关于mongodb基础的命令
banji----数据库 class---集合 1.查看所在的数据库 db 2.查看所有的数据库 show dbs 3.创建数据库 use banji #查看所有的数据库show dbs,创建的数据库 ...
- windows程序设计 Unicode和多字节
Unicode和多字节 Unicode是宽字符 多字节是窄字符 类型 变量类型 初始化方式 Unicode LPWSTR L"string" 多字节 LPSTR "str ...
- Java 中的E，K，V，T，U，S
Java泛型中的标记符含义: E - Element (在集合中使用,因为集合中存放的是元素) T - Type(Java 类) K - Key(键) V - Value(值) N - Number ...
- HTML和CSS总结
语义化.我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的 ...
- 0006-20180422-自动化第七章-python基础学习笔记
内容回顾: - bytes - str 和bytes - int - str - list - tuple - 深拷贝和浅拷贝 今日内容: 数据类型 - bytes - int - str - boo ...
- JSONModel(I)
JSONModel使用简介 JSONModel 只需要将你的 model 类继承自 JSONModel ,而同时 model 中的属性名又恰巧可以和 JSON 数据中的 key 名字一样的话,那么非常 ...
- js 取消事件冒泡
html部分 <input type="button" id="btn1" value="按钮" /> <div id=& ...