<!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的更多相关文章

  1. Angularjs checkbox的ng属性

    angularjs 默认给 input[checkbox] 元素定制了一些属性,如: <input type="checkbox" ng-mudel="name&q ...

  2. AngularJS checkbox/复选框 根据缓存数据实时显示

    想缓存选择按钮时,可以使用这样的方法. index.html <!DOCTYPE html> <html data-ng-app="App"> <he ...

  3. angularjs checkbox 框的操作

    前言:今天遇到一个问题,需要对多选按钮进行操作,作为js菜鸟,只能做自己慢慢琢磨了-- <label class="checkbox-inline custom-checkbox no ...

  4. angularjs表单验证checkbox

    angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...

  5. angularjs实现 checkbox全选、反选的思考

    之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使. 好长时间没写代码,感觉好多都不会了. 感谢这周没有单休,我能看熬夜看奥运了.我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间 ...

  6. AngularJS判断checkbox/复选框是否选中并实时显示

    最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: 1 <!DOCTYPE h ...

  7. ZH奶酪：AngularJS判断checkbox/复选框是否选中并实时显示

    最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: <!DOCTYPE htm ...

  8. （转）AngularJS判断checkbox/复选框是否选中并实时显示

    最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: <!DOCTYPE htm ...

  9. angularjs ng-repeat checkbox

    <div class="col-md-3" ng-repeat="user in title.UserList"> <p class=&quo ...

随机推荐

  1. openshift 容器云从入门到崩溃之五《部署应用》

    1.配置部署模板 配置好用户权限之后就可以部署应用了oc常用的两种部署方式: Deploy Image方式 优点:这种方式是最简单的部署方式,你只需要有一个容器镜像就行了或者公开的docker hub ...

  2. pandas处理时间序列（2）：DatetimeIndex、索引和选择、含有重复索引的时间序列、日期范围与频率和移位、时间区间和区间算术

    一.时间序列基础 1. 时间戳索引DatetimeIndex 生成20个DatetimeIndex from datetime import datetime dates = pd.date_rang ...

  3. utf8 vs utf8mb4

    UTF-8 is a variable-length encoding. In the case of UTF-8, this means that storing one code point re ...

  4. cocos2d-x JS 各类点、圆、矩形之间的简单碰撞检测

    这里总结了一下点.圆.矩形之间的简单碰撞检测算法 (ps:矩形不包括旋转状态) 点和圆的碰撞检测: 1.计算点和圆心的距离 2.判断点与圆心的距离是否小于圆的半 isCollision: functi ...

  5. C#设计模式(9)——装饰者模式（Decorator Pattern）（转）

    一.引言 在软件开发中,我们经常想要对一类对象添加不同的功能,例如要给手机添加贴膜,手机挂件,手机外壳等,如果此时利用继承来实现的话,就需要定义无数的类,如StickerPhone(贴膜是手机类).A ...

  6. HDU 2586 How far away(LCA+邻接表)

    How far away &题解: 和上篇是一样的题,这用的是lca方法做的, 不知道为什么,把数组开到80000 就a了 >_< 哈 我现在知道为什么了,因为我的rmq数组没有乘 ...

  7. 使用dbeaver查mysql的表会导致锁表的问题

    查询完成之后接着需要使用rollback,不然其它session没法执行语句.

  8. Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.12.4

    Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.12.4 from https://repo.mave ...

  9. OAuth 2.0之授权码模式

    转载自:http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html OAuth 2.0授权码模式 授权码模式(authorization code)是功 ...

  10. Docker Swarm redis 集群搭建

    Docker Swarm redis 集群搭建 环境1: 系统:Linux Centos 7.4 x64 内核:Linux docker 3.10.0-693.2.2.el7.x86_64 Docke ...