angular 添加用户

最新推荐文章于 2021-01-15 15:35:44 发布
最新推荐文章于 2021-01-15 15:35:44 发布
阅读量195 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gepeng_66666/article/details/78315000
版权 
<!DOCTYPE html>
<html ng-app="myapp">
<head lang="en">
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <!--<script src="jquery.1.12.4.js"></script>-->
    <script>
        var app=angular.module("myapp",[]);

        app.controller("UserCtrl", function ($scope) {
            $scope.data=[
                {
                    id:1,
                    name:"张三",
                    pw:"123",
                    age:18,
                    sex:"男"
                },
                {
                    id:2,
                    name:"王五",
                    pw:"123",
                    age:12,
                    sex:"男"
                },
                {
                    id:3,
                    name:"李四",
                    pw:"123",
                    age:11,
                    sex:"男"
                }
            ];

            var i=3;
            $scope.add=function () {
                i=i+1;
                var useraa={
                    id:i,
                    name:$scope.username,
                    pw:$scope.password,
                    age:$scope.age,
                    sex:$scope.sex
                };
                $scope.data.push(useraa);
                $scope.username="";
                $scope.password="";
                $scope.age="";
                $scope.sex="";
                $scope.adduserngshow=false;
            };

            $scope.adduser = function () {
                $scope.adduserngshow=true;
            };

            $scope.edituser= function (index) {
                var user=$scope.data[index];
                $scope.indexx=index;
                $scope.e_username=user.name;
                $scope.e_old_password = "";
                $scope.e_password = "";
                $scope.e_repassword = "";
                $scope.eidtuserngshow=true;
            };

            $scope.eidt= function () {
                if($scope.e_password!=$scope.e_repassword){
                    alert("两次密码不一致");
                    return;
                }
                $scope.data[$scope.indexx].pw=$scope.e_password;
                $scope.eidtuserngshow=false;
            };

            //用户名查询



        });

        //全选全不选
        $(function () {
            $("input[name='check_all']").click(function () {
                var chked=this.checked;
                $("input[name='users']").each(function(){
                    this.checked=chked;
                })
            });
        });
    </script>
</head>
<body ng-controller="UserCtrl">
    <div>
        <input type="text" placeholder="用户名查询" ng-model="selectname">
    </div>

    <table border="1px" cellspacing="0px" cellpadding="0px" align="center">
        <tr>
            <th><input type="checkbox" name="check_all"></th>
            <th>id</th>
            <th>用户名</th>
            <th>密码</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr ng-repeat="d in data | filter :{'name':selectname} | filter : {'age':selectname} | filter : {'sex' : selectname}">
            <td><input type="checkbox" name="users"></td>
            <td>{{d.id}}</td>
            <td>{{d.name}}</td>
            <td>{{d.pw}}</td>
            <td>{{d.age}}</td>
            <td>{{d.sex}}</td>
            <td><button ng-click="edituser($index)">修改密码</button></td>
        </tr>
    </table>

    <button style="text-align: center; background-color: #007aff; display: block; margin: 10px auto" ng-click="adduser()">添加用户</button>

    <div ng-show="adduserngshow">
        <table align="center" border="1px" cellspacing="0px" cellpadding="0px" >
            <tr>
                <th>用户名:</th>
                <td><input type="text" ng-model="username" placeholder="请输入用户名"></td>
            </tr>

            <tr>
                <th>密码:</th>
                <td><input type="text" ng-model="password" placeholder="请输入密码"></td>
            </tr>

            <tr>
                <th>年龄:</th>
                <td><input type="text" ng-model="age" placeholder="请输入年龄"></td>
            </tr>

            <tr>
                <th>性别:</th>
                <td><input type="text" ng-model="sex" placeholder="请输入性别"></td>
            </tr>

            <tr>
                <td colspan="2" align="center">
                    <button ng-click="add()">提交</button>
                </td>
            </tr>

        </table>

    </div>



    <div ng-show="eidtuserngshow">
        <table align="center" border="1px" cellspacing="0px" cellpadding="0px" >
            <tr>
                <th>用户名:</th>
                <td><input type="text" ng-model="e_username" disabled></td>
            </tr>

            <tr>
                <th>旧密码:</th>
                <td><input type="text" ng-model="e_old_password"></td>
            </tr>

            <tr>
                <th>新密码:</th>
                <td><input type="text" ng-model="e_password"></td>
            </tr>

            <tr>
                <th>重复密码:</th>
                <td><input type="text" ng-model="e_repassword"></td>
            </tr>

            <tr>
                <td colspan="2" align="center">
                    <input type="hidden" ng-model="indexx">
                    <button ng-click="eidt()">提交</button>
                </td>
            </tr>

        </table>

    </div>


</body>
</html>

gepeng_66666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular6 用户自定义标签开发的实现方法
10-17
主要介绍了Angular6 用户自定义标签开发的实现方法，下面我们就通过一个简单的例子演示Angular6中的这一新功能，小编觉得挺不错的，现在分享给大家，需要的朋友可以参考下
angularjs添加用户
RenZjun的博客
10-23 462
用户管理 - 添加用户             var app = angular.module("UMApp", []);         app.controller("UMCtrl", function ($scope) {             $scope.data = [];             var id = 1;             // 显示
Angularjs添加用户
guoleisb10的博客
10-25 271
添加元素 button{ border: 5px solid blue; background-color: blue; border-radius: 5%; } var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope){
angular 添加
qq_41212790的博客
01-17 302
table tr:nth-child(1) { background-color: gainsboro; } tr:nth-child(even) { background-color: navajowhite; } tr:nth-child(odd) { background-color: goldenrod; } 数量排序: 按数
angular js使用----添加用户
Android10001的博客
10-22 220
用户 var app = angular.module("UsersApp", []); app.controller("UsersCtrl", function ($scope) { $scope.data = [ { id: 1,
angular用户添加案例
PremierAmour的博客
12-21 591
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/angular.min.js"></script> <title></title> <style> th {
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
10-19
主要介绍了Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法,需要的朋友可以参考下
angular-demo
05-03
此应用程序已部署在Heroku上： : （请等待几...angular的表单验证提供了简单的方法来添加无效的类和样式表单（使用ng-class和formName。$ valid） 因为严重度等级和分数几乎在用户第一次开始单击答案选择时立即显示，
Angular2架构总览
02-24
使用Angular自定义标记编写HTML模板编写组建类来处理这些模板在services中添加应用逻辑将顶级根组件传递给Angular引导Angular接管之后，在浏览器中显示应用内容，并根据我们提供的指令对用户的交互做出响应。...
Angular入门系列 第五章：添加服务
Jim~LoveQ的博客
01-15 1904
组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。
angular添加和删除
sui_yz的博客
01-09 637
table tr:nth-child(even){ background: #eee;}             tr button{ width: 30px;}                                                                   var sapp=angular.module("myapp",[]);       
angular入门_Angular和用户身份验证入门
culi3182的博客
08-30 808
angular入门This article was originally published on OKTA Developer Blog. Thank you for supporting the partners who make SitePoint possible. 本文最初发布在OKTA开发人员博客上 。 感谢您支持使SitePoint成为可能的合作伙伴。 AngularJS rei...
（更新至2022年）城镇男性就业人员调查周平均工作时间.xls
最新发布
05-05
数据来源：中国人口与就业统计NJ-2023版
各地区技工院校综合情况(2022年).xls
05-05
数据来源：中国劳动统计NJ-2023版
基于matlab实现样本熵算法，可用于提取生理信号的特征参数
05-04
基于matlab实现样本熵算法，可用于提取生理信号的特征参数，运算速度较快，m=1或2；r=0.1_std(data)~0.25_std(data)最佳。.rar
蜂网-SCM车销访销业务.pptx
05-04
蜂网_SCM车销访销业务.pptx
数据更新至2020年国民经济主要指标一览表.xls
05-05
数据来源：中国电力统计NJ-2021版
图书借阅管理系统设计与实现及论大学生写作能力.docx
05-04
图书借阅管理系统设计与实现及论大学生写作能力.docx
node-v10.19.0-linux-armv6l.tar.xz
05-04
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
angular router
08-27
要使用 Angular Router，首先需要在应用模块中导入 `RouterModule` 并将其添加到 `imports` 数组中。然后，可以使用 `<router-outlet>` 指令来指定路由出口，即页面内容将显示在该位置。 可以使用 `RouterLink` ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值