用户信息表练习/删除/全选/添加

来源：互联网发布：php周末培训班编辑：程序博客网时间：2024/06/08 20:01
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>AngularJS+添加用户+修改密码</title>  //这里是angular包    <style>        *{            margin: 0 auto;        }        .box{            width: 800px;            border: 1px solid #555555;            height: 1000px;        }    </style>    <script>        var app = angular.module("myapp",[]);        app.controller("myCtrl",function ($scope) {            //数据            $scope.data = [{                done:false,                name:"张三",                pass:123,                age:22,                sex:"女"            },{                done:false,                name:"李四",                pass:456,                age:44,                sex:"男"            },{                done:false,                name:"王五",                pass:789,                age:33,                sex:"女"            },{                done:false,                name:"赵六",                pass:234,                age:55,                sex:"男"            }];            //全选            $scope.checkAll=function () {                for(var i=0;i<$scope.data.length;i++){                    if($scope.check==true){                        $scope.data[i].done=true;                    }else{                        $scope.data[i].done=false;                    }                }            };            //全部删除            $scope.delAll=function () {                $scope.data=[];            }            //批量删除            $scope.del=function () {                for(var i=0;i<$scope.data.length;i++){                    if($scope.data[i].done==true){                            $scope.data.splice(i,1);                            i--;                    }                }            };            //根据年龄范围下拉菜单实现用户显示            $scope.ageSize = "--请选择--";            $scope.ageFilter = function (item) {                if ($scope.ageSize != "--请选择--"){                    var ageSize = $scope.ageSize;                    var arr = ageSize.split("-");                    var min = arr[0];                    var max = arr[1];                    var age = item.age;                    if(age<min || age>max){                        return false;                    } else {                        return true;                    }                } else {                    return true;                }            };        });    </script></head><body ng-app="myapp" ng-controller="myCtrl"><div class="box">    <br>    <h2 style="padding-left: 300px">用户信息表</h2>    <br>    <div style="padding-left: 100px">        <input type="text" placeholder="用户名查询" ng-model="search">        年龄:<select ng-model="ageSize">        <option>--请选择--</option>        <option>11-20</option>        <option>21-30</option>        <option>31-40</option>        <option>41-50</option>        <option>51-60</option>    </select>         性别:<select ng-model="sear">        <option>男</option>        <option>女</option>    </select>         <button ng-click="delAll()">全部删除</button>        <button ng-click="del()">批量删除</button>    </div>    <br>    <table cellpadding="10" cellspacing="1" border="soild 1px #000">        <tr>            <th><input type="checkbox" ng-click="checkAll()" ng-model="check">全选</th>            <th>ID</th>            <th>用户名</th>            <th>密码</th>            <th>年龄</th>            <th>性别</th>            <th>操作</th>        </tr>        <tr ng-repeat="item in data|filter:{sex:sear}|filter:ageFilter">            <td><input type="checkbox" ng-model="item.done"></td>            <td>{{$index+1}}</td>            <td>{{item.name}}</td>            <td>{{item.pass}}</td>            <td>{{item.age}}</td>            <td>{{item.sex}}</td>            <td><button ng-click="up($index)">修改密码</button></td>        </tr>    </table></div></body></html>
阅读全文
0 0