zoukankan      html  css  js  c++  java
  • 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;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;
    20px;
    height:20px;
    border: 1px solid #ddd;
    }

    .checkbox em:after{
    opacity: 0;
    content: '';
    position: absolute;
    top:3px;
    left:5px;
    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{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>
  • 相关阅读:
    zzuli---1912---小火山的爱情密码
    zzuli---1907---
    zzuli---1899---985的最大和难题
    zzuli---1898---985的数字难题
    Light oj ---1058---poj---1971---Parallelogram Counting
    UVA---10200
    poj---1064---Cable master
    hdu---5423---Rikka with Tree
    fzu---2128
    Bookshelf 2 01背包
  • 原文地址:https://www.cnblogs.com/BlogRegisterAspx/p/8623879.html
Copyright © 2011-2022 走看看