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 相关文章推荐
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
老生常谈ES6中的类
Jul 31 Javascript
layui 上传图片 返回图片地址的方法
Sep 26 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 Javascript
Vue实现开关按钮拖拽效果
Sep 22 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
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
PHP实现倒计时功能
2020/11/16 PHP
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
HTML的select控件美化
2017/03/27 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
韩语专业本科生求职信
2013/10/01 职场文书
幼儿园教师考核制度
2014/02/01 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
黄石寨导游词
2015/02/05 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python
浅谈Python数学建模之数据导入
2021/06/23 Python
MySQL事务的隔离级别详情
2022/07/15 MySQL