AngularJS 查询、全选、反选、全部删除、批量删除、添加、修改

最新推荐文章于 2019-08-30 11:41:00 发布

习惯了沉默012

最新推荐文章于 2019-08-30 11:41:00 发布

阅读量415

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/huakaihualuo012/article/details/78312332

版权

AngularJS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            margin: 0 auto;
            text-align: center;
        }
        table {
            margin: 20px auto;
            border-collapse: collapse;
        }

        th, td {
            padding: 15px;
            border: 1px solid #000000;
        }
        .aaa{
            margin: 0 auto;
        }
    </style>
    <script src="../../angular-1.5.5/angular.min.js"></script>
    <script>
        //声明主模块
        var myapp = angular.module("myapp", []);
        //添加控制器
        myapp.controller("myCtrl", function ($scope) {
            $scope.users = [{
                "name": "张三",
                "pass": 123,
                "age": 22,
                "sex": "男",
                "done": false
            }, {
                "name": "李四",
                "pass": 456,
                "age": 33,
                "sex": "女",
                "done": false
            }, {
                "name": "王五",
                "pass": 789,
                "age": 44,
                "sex": "男",
                "done": false
            }];
            //年龄过滤查询
            $scope.ageSize = "--请选择--";
            $scope.ageFilter = function (item) {
                if ($scope.ageSize != "--请选择--") {
                    var ageSize = $scope.ageSize;
                    var ageArr = ageSize.split("-");
                    var min = ageArr[0];
                    var max = ageArr[1];
                    var age = item.age;
                    if (age > max || age < min) {
                        return false;
                    } else {
                        return true;
                    }
                } else {
                    return true;
                }
            };
            //全选
            $scope.checkAll = function () {
                for (var i = 0; i < $scope.users.length; i++) {
                    if ($scope.search == true) {
                        $scope.users[i].done = true;
                    } else {
                        $scope.users[i].done = false;
                    }
                }
            }
            //反选
            var n = 0;
            $scope.fanxuan = function () {

		for (var i=0;i<$scope.users.length;i++){

                	if ($scope.users[i].done == true) {
                    		n++;
                	} else {
                    		n--;
                	}
                	if (n == $scope.users.length) {
                    		$scope.search = true;
                	} else {
                    		$scope.search = false;
                	}

		}
            }
            //全部删除
            $scope.deleteAll=function () {
                $scope.users=[];
            }
            //批量删除
            $scope.del=function () {
                for (var i=0;i<$scope.users.length;i++){
                    if ($scope.users[i].done == true){
                        $scope.users.splice(i,1);
                        i--;
                    }
                }
            }
            //添加用户
            $scope.show = false;
            $scope.add = function () {
                $scope.show = true;
            }
            //提交
            $scope.tj = function () {
                if($scope.addname!=null&&$scope.addage>10&&$scope.addage<60){
                    $scope.users.push({"done":false,"name":$scope.addname,"pass":$scope.addpass,"age":$scope.addage,"sex":$scope.addsex});
                } else {
                    alert("不满足条件");
                }
                $scope.addname="";
                $scope.addpass="";
                $scope.addage="";
                $scope.addsex="";
                $scope.show = false;
            }
            //修改密码
            $scope.shows = false;
            $scope.up = function (index) {
                $scope.shows = true;
                var user = $scope.users[index];

                $scope.name = user.name;
                $scope.index = index;
            }
            $scope.tjpass = function () {
                if ($scope.users[$scope.index].pass != $scope.pass) {
                    alert("旧密码和新密码不一致");
                    return;
                } else if ($scope.uppass != $scope.upsure) {
                    alert("两次密码不一致");
                    return;
                }
                $scope.users[$scope.index].pass = $scope.uppass;
                $scope.name ="";
                $scope.pass="";
                $scope.uppass="";
                $scope.upsure="";
                $scope.show = false;
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div class="box">
    <h1>用户信息表</h1>
    <input type="text" placeholder="用户名查询" ng-model="sel">
    年龄：<select ng-model="ageSize">
    <option>--请选择--</option>
    <option>0-10</option>
    <option>11-20</option>
    <option>21-30</option>
    <option>31-40</option>
    <option>41-50</option>
</select>
    性别：<select>
    <option>男</option>
    <option>女</option>
</select>
    <button ng-click="deleteAll()">全部删除</button>
    <button ng-click="del()">批量删除</button>
    <br/>
</div>
<table>
    <thead>
    <tr>
        <th><input type="checkbox" ng-click="checkAll()" ng-model="search"></th>
        <th>id</th>
        <th>用户名</th>
        <th>密码</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in users|filter:{name:sel}|filter:ageFilter">
        <td><input type="checkbox" ng-model="item.done" ng-click="fanxuan($index)"></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>
    </tbody>
</table>
<br/><br/>
<div class="aaa" style="width: 100px; height: 60px;"><button ng-click="add()">添加用户</button></div>
<div ng-show="show">
    <table cellpadding="10" cellspacing="1" border="soild 1px #000">
        <tr>
            <td>用户名:</td>
            <td><input type="text" placeholder="请输入用户名" ng-model="addname"></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="text" placeholder="请输入密码" ng-model="addpass"></td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td><input type="text" placeholder="请输入年龄" ng-model="addage"></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td><input type="text" placeholder="请输入性别" ng-model="addsex"></td>
        </tr>
        <tr align="center">
            <td colspan="2"><button ng-click="tj()">提交</button></td>
        </tr>
    </table>
</div>
<div ng-show="shows">
    <table cellpadding="10" cellspacing="1" border="soild 1px #000">
        <tr>
            <td>用户名:</td>
            <td><input type="text" placeholder="用户名" ng-model="name"></td>
        </tr>
        <tr>
            <td>旧密码:</td>
            <td><input type="text" placeholder="旧密码" ng-model="pass"></td>
        </tr>
        <tr>
            <td>新密码:</td>
            <td><input type="text" placeholder="新密码" ng-model="uppass"></td>
        </tr>
        <tr>
            <td>确认新密码:</td>
            <td><input type="text" placeholder="请再次输入新密码" ng-model="upsure"></td>
        </tr>
        <tr align="center">
            <td colspan="2"><button ng-click="tjpass()">提交</button></td>
        </tr>
    </table>
</div>
<p></p>
</div>
</body>
</html>

习惯了沉默012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 查询、全选、反选、全部删除、批量删除、添加、修改

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .box { margin:
复制链接

扫一扫