y

来源:互联网 发布:主力资金知乎 编辑:程序博客网 时间:2024/03/29 13:43
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            text-align: center;        }        table{            border-collapse: collapse;            margin: 20px auto;        }        th,td{            padding: 10px;            border: 1px solid #000;        }    </style>    <script src="angular-1.5.5/angular.min.js"></script>    <script>        var myapp=angular.module("myapp",[]);        myapp.controller("myCtrl",function($scope){            $scope.data=[{                id:1,                name:"张三",                pas:"123",                age:"23",                sex:"男",                check:false            },{                id:2,                name:"李四",                pas:"345",                age:"20",                sex:"女",                check:false            },{                id:3,                name:"王五",                pas:"23",                age:"45",                sex:"女",                check:false            },{                id:4,                name:"赵六",                pas:"789",                age:"45",                sex:"女",                check:false            },{                id:5,                name:"赵四",                pas:"7887",                age:"23",                sex:"男",                check:false            }];            //按照年龄查找            $scope.ageSize="--请输选择--";            $scope.ageFun=function(item){                //return false;                if($scope.ageSize!="--请输选择--"){                    var arr=$scope.ageSize.split("-");                    var min=arr[0];                    var max=arr[1];                    if(item.age>max||item.age<min){                        return false;                    }else{                        return true;                    }                }else{                    return true;                }            };            //按照性别查找            $scope.sex="--请输选择--";            $scope.sexFun=function(item){                if($scope.sex!="--请输选择--"){                    if(item.sex==$scope.sex){                        return true;                    }else{                        return false;                    }                }else{                    return true;                }            };            //删除全部            $scope.delAll=function(){                $scope.data.length=0;            };            //全选            $scope.checkBtn=false;            $scope.checkAll=function(){                console.log($scope.checkBtn);                if($scope.checkBtn==true){                    for(var i=0;i<$scope.data.length;i++){                        $scope.data[i].check=true;                    }                }else{                    for(var i=0;i<$scope.data.length;i++){                        $scope.data[i].check=false;                    }                }            }            //计数功能            var n=0;            $scope.fx=function(index){                //console.log(index);                if($scope.data[index].check==true){                    n++;                }else{                    n--;                }                console.log(n);                if(n==$scope.data.length){                    $scope.checkBtn=true;                }else{                    $scope.checkBtn=false;                }            };            //批量删除            $scope.del=function(){                for(var i=0;i<$scope.data.length;i++){                    if($scope.data[i].check==true){                        $scope.data.splice(i,1);                        i--;                    }                }            };            //添加功能            $scope.show=false;            $scope.addUser=function(){                $scope.show=true;            }            $scope.tj=function() {                if($scope.nameNext==""||$scope.nameNext==null){                    alert("姓名")                }else if($scope.correct==true){                    /*$scope.data.push({                     name:$scope.nameNext,                     pas:$scope.pasNext,                     age:$scope.ageNext,                     sex:$scope.sexNext,                     check:false                     })*/                    console.log("修改");                    $scope.data[$scope.index].pas=$scope.pasNext;                }else{                    $scope.data.push({                        name:$scope.nameNext,                        pas:$scope.pasNext,                        age:$scope.ageNext,                        sex:$scope.sexNext,                        check:false                    })                }                $scope.show=false;            };            $scope.correct=function(index){                console.log(index);                $scope.show=true;                $scope.nameNext=$scope.data[index].name;                $scope.pasNext=$scope.data[index].pas;                $scope.correct=true;                //记录索引                $scope.index=index;            }        })    </script></head><body ng-app="myapp" ng-controller="myCtrl"><span>姓名查找</span><input type="text" placeholder="请输入姓名" ng-model="search"><span>年龄查找</span><select ng-model="ageSize">    <option>--请输选择--</option>    <option>10-20</option>    <option>20-30</option>    <option>30-40</option>    <option>40-50</option></select><span>性别查找</span><select ng-model="sex">    <option>--请输选择--</option>    <option></option>    <option></option></select><button ng-click="delAll()">删除全部</button><button ng-click="del()">批量删除</button><table>    <thead>    <tr>        <th>全选<input type="checkbox" ng-model="checkBtn" ng-click="checkAll()"></th>        <th>序号</th>        <th>姓名</th>        <th>密码</th>        <th>年龄</th>        <th>性别</th>        <th>操作</th>    </tr>    </thead>    <tbody>    <tr ng-repeat="item in data|filter:{name:search}|filter:ageFun|filter:sexFun">        <td><input type="checkbox" ng-model="item.check" ng-click="fx($index)"></td>        <td>{{$index}}</td>        <td>{{item.name}}</td>        <td>{{item.pas}}</td>        <td>{{item.age}}</td>        <td>{{item.sex}}</td>        <td><button ng-click="correct($index)">修改密码</button></td>    </tr>    </tbody></table><button ng-click="addUser()">添加用户</button><table ng-show="show">    <tbody>    <tr>        <td>姓名</td>        <td><input type="text" ng-model="nameNext" placeholder="请输入姓名"></td>    </tr>    <tr>        <td>密码</td>        <td><input type="text" ng-model="pasNext" placeholder="请输入密码"></td>    </tr>    <tr>        <td>年龄</td>        <td><input type="number" ng-model="ageNext" placeholder="请输入年龄"></td>    </tr>    <tr>        <td>性别</td>        <td><input type="text" ng-model="sexNext"  placeholder="请输入性别"></td>    </tr>    <tr>        <td colspan="2"><button ng-click="tj()">提交</button></td>    </tr>    <!--<tr>        <td>密码确认</td>        <td><input type="text" ng-model="pasNext2"></td>    </tr>-->    </tbody></table></body></html>
原创粉丝点击