AngularJS前端页面操作之用户修改密码功能示例


Posted in Javascript onMarch 27, 2017

本文实例讲述了AngularJS前端页面操作之用户修改密码功能。分享给大家供大家参考,具体如下:

最近在做前端设计,主要使用的知识有AngularJS和nodejs来进行页面显示和数据请求、处理等工作。在设计页面比如忘记密码时,发现一个有效的设计思路是很重要的。

就以修改密码为例,要将提示信息友好的展示给用户,明确告诉用户在操作的过程中那部分有问题,这需要定义详细的变量以及能在页面的不同位置显示信息。下面的代码是自己写的一个简单例子,记录学习进程。

changePwd

var app = angular.module("myapp",[]);
app.controller('changPwdCtrl',function($scope){
  $scope.name = "xiaozhang";
  $scope.pwd = "hello";
  $scope.newPwd = "hello1";
  $scope.rNewPwd = "hello2";
  $scope.submit = function (){
    $scope.reseltNotRule = '';
    $scope.resultNotSame = '';
    $scope.result = '';
    $scope.resultSuccess = '';
    if(!($scope.name&&$scope.pwd&&$scope.newPwd&&$scope.rNewPwd)){
      $scope.result = "请填写完整";
    }else if ($scope.newPwd != $scope.rNewPwd) {
      $scope.resultNotSame = "两次密码不一致";
    }else if ($scope.pwd == $scope.newPwd) {
      $scope.result = "新旧密码不能一致";
    }
  }
});

之后具体的显示信息可以在具体化,基本思路是利用angular的 双向数据绑定来进行数据分析,从而显示不同的信息。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
js闭包用法实例详解
Dec 13 Javascript
几行js代码实现自适应
Feb 24 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
JS实现倒计时图文效果
Nov 17 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 #Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 #Javascript
JS简单实现数组去重的方法示例
Mar 27 #Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 #jQuery
基于JavaScript实现焦点图轮播效果
Mar 27 #Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 #Javascript
JS闭包用法实例分析
Mar 27 #Javascript
You might like
德生S2000电路分析
2021/03/02 无线电
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
Python常用的日期时间处理方法示例
2015/02/08 Python
Flask框架信号用法实例分析
2018/07/24 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
Python eval函数介绍及用法
2020/11/09 Python
天游软件面试
2013/11/23 面试题
优秀小学生家长评语
2014/01/30 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers