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

Mq_Zhang01

于 2017-10-24 10:51:59 发布

阅读量429

点赞数

分类专栏： angular的应用文章标签：删除查询全选反选

本文链接：https://blog.csdn.net/Zmq321834649/article/details/78327145

版权

angular的应用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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