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 相关文章推荐
JS获取html对象的几种方式介绍
Dec 05 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
如何快速上手Vuex
Feb 14 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
详解TypeScript的基础类型
Feb 18 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
PHP伪静态页面函数附使用方法
2008/06/20 PHP
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
php数组指针操作详解
2017/02/14 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
JS hashMap实例详解
2016/05/26 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
python读取csv文件示例(python操作csv)
2014/03/11 Python
python解析xml文件实例分析
2015/05/27 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
django中的数据库迁移的实现
2020/03/16 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
用C语言实现文件读写操作
2013/10/27 面试题
个人委托书范本
2014/09/13 职场文书
长城导游词
2015/01/30 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
MySQL创建定时任务
2022/01/22 MySQL
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技
JavaScript实现音乐播放器
2022/08/14 Javascript