AngularJS 用户名查询、年龄查询、性别查询、全部删除、批量删除、添加用户、修改密码

最新推荐文章于 2022-09-10 23:07:05 发布
最新推荐文章于 2022-09-10 23:07:05 发布
阅读量1k 收藏 1
点赞数
分类专栏： AngularJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huakaihualuo012/article/details/78337314
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            text-align: center;
        }
        table{
            margin: 20px auto;
            border-collapse: collapse;
        }
        th,td{
            padding: 20px;
            border: 1px solid #000000;
        }
        .add{
            width: 150px;
            height: 50px;
            background: deepskyblue;
            font-size: 20px;
        }
    </style>
    <script src="../../angular-1.5.5/angular.min.js"></script>
    <script>
        var myapp = angular.module("myapp", []);
        myapp.controller("myCtrl", function ($scope) {
            //模拟数据
            $scope.data=[{
                "name":"张三",
                "pass":123,
                "age":22,
                "sex":"男",
                "check":false
            },{
                "name":"李四",
                "pass":456,
                "age":33,
                "sex":"女",
                "check":false
            },{
                "name":"王五",
                "pass":789,
                "age":44,
                "sex":"男",
                "check":false
            },{
                "name":"赵六",
                "pass":741,
                "age":35,
                "sex":"女",
                "check":false
            },{
                "name":"周七",
                "pass":852,
                "age":23,
                "sex":"男",
                "check":false
            }];
            //按照年龄查询
            $scope.ageSize="--请选择--";
            $scope.ageFun=function (item) {
                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;
                        n=$scope.data.length;
                    }
                }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--;
                }
                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{
                    $scope.data.push({"name":$scope.nameNext,"pass":$scope.passNext,"age":$scope.ageNext,"sex":$scope.sexNext,"check":false});
                    //清空输入框
                    $scope.nameNext="";
                    $scope.passNext="";
                    $scope.ageNext="";
                    $scope.sexNext="";
                    $scope.show=false;
                }
            }
            //修改密码
            $scope.shows=false;
            $scope.correct=function (index) {
                $scope.shows=true;
                $scope.xgname=$scope.data[index].name;
                $scope.xgpass=$scope.data[index].pass;
                $scope.index=index;
            }
            $scope.tjpass=function () {
                if ($scope.xpass!=$scope.axpass){
                    alert("两次输入的密码不一致");
                    return;
                }
                $scope.data[$scope.index].pass = $scope.xpass;
                $scope.xgname="";
                $scope.xgpass="";
                $scope.xpass="";
                $scope.axpass="";
                $scope.shows=false;
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h2>用户信息表</h2>
用户名：<input type="text" placeholder="用户名查询" ng-model="search">
年龄：<select ng-model="ageSize">
    <option>--请选择--</option>
    <option>10-20</option>
    <option>21-30</option>
    <option>31-40</option>
    <option>41-50</option>
</select>
性别：<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-click="checkAll()" ng-model="checkBtn"></th>
            <th>id</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+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.pass}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td><button ng-click="correct($index)">修改密码</button></td>
        </tr>
    </tbody>
</table>
<button class="add" ng-click="addUser()">添加用户</button>
<table ng-show="show">
    <tbody>
        <tr>
            <td>姓名</td>
            <td><input type="text" placeholder="请输入姓名" ng-model="nameNext"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="text" placeholder="请输入密码" ng-model="passNext"></td>
        </tr>
        <tr>
            <td>年龄</td>
            <td><input type="text" placeholder="请输入年龄" ng-model="ageNext"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td><input type="text" placeholder="请输入性别" ng-model="sexNext"></td>
        </tr>
        <tr>
            <td colspan="2"><button ng-click="tj()">提交</button></td>
        </tr>
    </tbody>
</table>
<table ng-show="shows">
    <tbody>
    <tr>
        <td>姓名</td>
        <td><input type="text" placeholder="请输入姓名" ng-model="xgname"></td>
    </tr>
    <tr>
        <td>旧密码</td>
        <td><input type="text" placeholder="请输入密码" ng-model="xgpass"></td>
    </tr>
    <tr>
        <td>新密码</td>
        <td><input type="text" placeholder="请输入新密码" ng-model="xpass"></td>
    </tr>
    <tr>
        <td>确认新密码</td>
        <td><input type="text" placeholder="请再次输入新密码" ng-model="axpass"></td>
    </tr>
    <tr>
        <td colspan="2"><button ng-click="tjpass()">提交</button></td>
    </tr>
    </tbody>
</table>
</body>
</html>
习惯了沉默012
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular js 对添加用户，修改密码，敏感字，下拉菜单的综合操作
小白的博客
10-24 494
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> table{ border-collapse: collapse; } th,td{ padding: 10px;
angularJs 表格添加删除修改查询方法
10-18
下面小编就为大家分享一篇angularJs 表格添加删除修改查询方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
AngularJS实现对用户信息的增删改查
xy8199的博客
10-21 3771
本篇是对表单进行增删改查的操作，用到的是AngularJS实现的，有需要的可以看一下。 实现效果： 实现要求： 1. 搭建页面 2. 显示所有用户信息 3. 根据用户名实现用户查询显示 4. 根据年龄范围下拉菜单实现用户显示 5. 根据用户年龄实现用户显示 6. 实现批量删除功能：选中左侧多选框，点击批量删除，删除选中项，没选中提示用户，点击最上方的多选框，实现全选。
angularJS/路由实现增删改查
weikai_的博客
10-22 544
html> html> head> meta charset="UTF-8"> title>综合练习title> style> .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; } style>
【C++之构造函数】键盘输入用户名和年龄
霍喜猫的博客
09-10 2096
题目分别收录于 牛客网 在线编程-语法篇-C++入门-04面向对象-构造函数-CPP40 构造函数 题目 描述 现有一个人类（Person）,成员变量：姓名（string name）和年龄（int age），请给 Person 添加一个支持两个参数的构造函数，并对姓名和年龄两个成员进行初始化。 输入描述： 键盘输入用户名和年龄 输出描述： 通过 Person 类的showPerson()成员方法输出 Person 对象的姓名和年龄，中间使用空格隔开。 示例1 输入：
【Python】Python的三种格式化字符串的方法
huanqing2010的专栏
02-19 3744
简单介绍Python的三种格式化字符串的方法，C语言风格的%方法，str.format方法，Python3.6版本新推出的{变量名称}方法。
AngularJS前端页面操作之用户修改密码功能示例
10-20
主要介绍了AngularJS前端页面操作之用户修改密码功能,结合具体实例形式分析了AngularJS针对前端用户修改密码的判断操作实现技巧,需要的朋友可以参考下
Angularjs分页查询的实现
10-20
本文给大家分享angularjs实现分页查询功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
10-19
最近做项目遇到这样的需求，要求添加球员的功能，具体样式没做具体要求，下面小编给大家带来了AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)，感兴趣的朋友一起看看吧
mysql数据库 max 命令大全_数据库命令大全
weixin_36087586的博客
01-28 563
八、数据的操作show databases;//显示所有数据库use testdb//使用testdb数据库show tables;//显示所有表create table users(id int auto_increment,username varchar(20),address varchar(200),age int,key(id));//创建表，id自增长insert into user...
js点击按钮修改性别
u014414110的博客
02-22 1266
点击按钮修改性别 &lt;body&gt; &lt;input type="button" value="修改性别" id="btn"/&gt; &lt;input type="checkbox" value="男" name="sex" id="nan" /&gt;男 &lt;input ty
Kotlin普通类的声明和构造函数
c1392851600的专栏
07-06 722
Kotlin中类的声明使用class关键字,  在class后面跟类名即可例如:class Empty class Stu { fun getName() : String { return "default" } } class stud { fun getAge() : Int { return 0 } }上面这段代码共创建了三...
java自学笔记（day13）归纳总结自：B站狂神说java
weixin_46083893的博客
03-13 548
JavaScript 什么是JavaScript 概述 JavaScript是一门世界上最流行的脚本语言 一个合格的后端人员，必须要精通JavaScript 历史 地址链接 ECMAScript它可以理解为是JavaScript的一个标准 最新版本已经到es6版本了~ 但是大部分浏览器还只是停留在es5代码上！ 开发环境—线上环境，版本不一致 快速入门 引入JavaScript 1.内部标签 <script> //.... </script> 2.外部引用 abc
【Python百日基础系列】Day03 - Python 数据类型
岳涛的博客
10-13 292
文章目录视频讲解1：视频讲解2：一、Python中的数据类型1.1 数据类型系统是编程语言的核心1.2 Python中的数据类型种类 视频讲解1： 视频讲解2： 一、Python中的数据类型 1.1 数据类型系统是编程语言的核心 数据类型一般指数据元。数据元( Data Element)，也称为数据元素，是用一组属性描述其定义、标识、表示和允许值的数据单元，在一定语境下，通常用于构建一个语义正确、独立且无歧义的特定概念语义的信息单元。数据元可以理解为数据的基本单元。 1.2 Python中的数据类型种类 P
Hyperledger Fabric 链码API的介绍
lengxue789的专栏
03-28 5926
版权声明：博客中的文章版权归博主所有，未经授权，禁止转载，转载请注明出处 网址 https://godoc.org/github.com/hyperledger/fabric/core/chaincode/shim 参数读取API GetFunctionAndParameters 提取调用链码交易中的参数，其中第一个作为被调用的函数名称，剩下的参数作为函数的执行参数 fu...
teach sex java_java反射机制
weixin_33493816的博客
02-28 1936
public Constructor[] getDeclaredConstructors()：获取所有的构造方法(包括私有、受保护、默认、公有)2.获取一个构造器(如果是无参构造器，那么参数写null或者不写)2.1获取单个 共有的构造器public Constructor getConstructor(Class ... paramterTypes) ;//获取单个的“公有的”构造方法(参数是构...
mysql的基础语法&例子
weixin_44364313的博客
11-12 508
即数据的有效性和准确性 数据库操作: (1)操作数据库 -> 操作表 ->操作数据 <1>操作数据库的命令: 1)显示当前所有的数据库:show databases; 2)创建数据库: create database 数据库名; 3)删除数据库:drop database 数据库名; 4)切换数据库:use 数据库名; <2>创建数据表: 表的三要素:<1...
表格的添加修改(综合题)
Honey_fag的博客
09-21 334
 html> html lang="en"> head> meta charset="UTF-8"> title>综合练习title> style> .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3;
angularjs 动态添加html
最新发布
10-27
AngularJS是一个流行的JavaScript框架，它允许开发人员使用MVC（模型-视图-控制器）模式来构建Web应用程序。在AngularJS中，动态添加HTML是通过指令来实现的。指令是一种特殊的AngularJS组件，它允许开发人员扩展...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值