angular的表格修改

<!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>

posted @ 2017-10-24 15:09  Ars灬木子  阅读(459)  评论(0编辑  收藏  举报