angularjs

来源：互联网发布：淘宝收到货后申请退款编辑：程序博客网时间：2024/05/18 00:54
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            padding: 0;            margin: 0;        }        table{            border-collapse: collapse;            text-align: center;        }        td{            padding: 15px;            border: 1px solid black;        }        th{            padding: 15px;            border: 1px solid black;        }        .font{            color: red;        }    </style>    <script src="angular-1.5.5/angular.js"></script>    <script>        var myapp=angular.module("myapp",[]);        myapp.controller("mCtrl",function ($scope) {            $scope.items=[                {"name":"张三","pass":"123","age":30,"sex":"男" ,check:false},                {"name":"李四","pass":"7867","age":25,"sex":"女", check:false},                {"name":"王五","pass":"4567","age":21,"sex":"男", check:false},                {"name":"赵六","pass":"45234","age":16,"sex":"女", check:false}];            $scope.add_sfHide=true;            $scope.add=function () {                $scope.sfHide=true;                $scope.add_sfHide=false;            };            //添加信息            $scope.addNew=function (name,pass,age,sex) {                var is=confirm("是否确认添加");                if(is){                    $scope.items.push({                        name:name,pass:pass,age:age,                        sex:sex                    });                    $scope.sfHide=false;                    $scope.add_sfHide=true;                }            };            //删除全部            $scope.allRemove=function () {                if(confirm("确认清除")){                    $scope.items=[];                }            }            //点击复选框全选            $scope.checkAll=function () {                if($scope.allCheck == true){                    for(var i=0;i<$scope.items.length;i++){                        $scope.items[i].check=true;                    }                }            };            //点击数据里的复选框 头部复选框被选中            $scope.itemCheck=function () {                var flag=0;                for(var i=0;i<$scope.items.length;i++){                    if($scope.items[i].check==true){                        flag++;                    }                }                if(flag==$scope.items.length){                    $scope.allCheck=true;                }else{                    $scope.allCheck=false;                };                //批量删除                $scope.PdelAll=function () {                    var is=confirm("是否删除");                    if(is==true){                        var arr=[];                        for(var i=0;i<$scope.items.length;i++){                            if($scope.items[i].check==false){                                arr.push($scope.items[i]);                            }                        }                        $scope.items=arr;                    }                }            };            $scope.orderName="name";            $scope.order=false;            //安字段排序            $scope.changeOrder=function (orderName) {                if($scope.orderName== orderName){                    $scope.order=!$scope.order;                }                $scope.orderName=orderName;            };            //点击变色            $scope.addClas=function (orderName) {                if(orderName==$scope.orderName){                    return "font";                }            }            // 用于接收修改的索引值            $scope.newIndex = 0;            //如果点击修改框            $scope.updatePass=function (inde,name,pass) {                $scope.update_hides=true;                $scope.oldName=name;                $scope.oldPass=pass;            };            //修改密码            $scope.newUpdate=function (name,pass,againPass) {                if(pass!=againPass){                    alert("两次密码不相符");                }else {                    //修改表数据                    $scope.items[$scope.newIndex].name=name;                    $scope.items[$scope.newIndex].pass=againPass;                    // 修改后隐藏修改框                    $scope.update_hides=false;                    // 修改后将新密码和确认密码置空                    $scope.newPass="";                    $scope.againPass="";                }            }        });    </script></head><body ng-app="myapp" ng-controller="mCtrl"><div style="float: left">    <input type="text" style="width: 100px" placeholder="用户名查询" ng-model="keys_name">    <input type="number" style="width: 50px" placeholder="min" ng-model="keys_min">    <span>-</span>    <input type="number" style="width: 50px" placeholder="max" ng-model="keys_max">    <select style="height: 25px" ng-model="sels_sex">        <option>男</option>        <option>女</option>    </select>    <button ng-click="allRemove()">全部删除</button>    <button style="width: 100px" ng-click="PdelAll()">批量删除</button>    <table>        <thead>        <tr>            <th><input type="checkbox" ng-model="allCheck" ng-click="checkAll()"></th>            <th>序号</th>            <th ng-click="changeOrder('name')" ng-class="addClas('name')">用户名</th>            <th ng-click="changeOrder('pass')" ng-class="addClas('pass')">密码</th>            <th ng-click="changeOrder('age')" ng-class="addClas('age')">年龄</th>            <th ng-click="changeOrder('sex')" ng-class="addClas('sex')">性别</th>            <th ng-click="">操作</th>        </tr>        </thead>        <tbody>        <tr ng-repeat="item in items|filter:{name:keys_name}|filter:{sex:sels_sex}|orderBy:orderName:order">            <td><input type="checkbox" ng-model="item.check" ng-click="itemCheck()"></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="updatePass($index,item.name,item.pass)">修改密码</button></td>        </tr>        <tr ng-if="sfHide">            <td colspan="7">                用户名:<input type="text" ng-model="input_name">                密码:<input type="text" ng-model="input_pass">                年龄:<input type="text" ng-model="input_age">                性别:<input type="text" ng-model="input_sex">                <button ng-click="addNew(input_name,input_pass,input_age,input_sex)">添加到列表</button>            </td>        </tr>        <tr ng-if="add_sfHide">            <td colspan="7">                <button style="width: 100%" ng-click="add()">添加用户</button>            </td>        </tr>    </table></div><div ng-if="update_hides">    <h1>修改框</h1>    <table>        <tr>            <th>用户名：<input type="text" ng-model="oldName"></th>        </tr>        <tr style="width: 100%">            <th>旧密码：<input type="text" ng-model="oldPass"></th>        </tr>        <tr>            <th>新密码：<input type="text" ng-model="newPass"></th>        </tr>        <tr>            <th>确认密码：<input type="text" ng-model="againPass"></th>        </tr>        <tr>            <th><button style="width: 100%" ng-click="newUpdate(oldName,newPass,againPass)">提交</button></th>        </tr>    </table></div></body></html>
阅读全文
0 0