AngularJS前端頁面操作之用戶修改密碼功能示例
本文實(shí)例講述了AngularJS前端頁面操作之用戶修改密碼功能。分享給大家供大家參考,具體如下:
最近在做前端設(shè)計(jì),主要使用的知識(shí)有AngularJS和nodejs來進(jìn)行頁面顯示和數(shù)據(jù)請(qǐng)求、處理等工作。在設(shè)計(jì)頁面比如忘記密碼時(shí),發(fā)現(xiàn)一個(gè)有效的設(shè)計(jì)思路是很重要的。
就以修改密碼為例,要將提示信息友好的展示給用戶,明確告訴用戶在操作的過程中那部分有問題,這需要定義詳細(xì)的變量以及能在頁面的不同位置顯示信息。下面的代碼是自己寫的一個(gè)簡(jiǎn)單例子,記錄學(xué)習(xí)進(jìn)程。
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 = "請(qǐng)?zhí)顚懲暾?; }else if ($scope.newPwd != $scope.rNewPwd) { $scope.resultNotSame = "兩次密碼不一致"; }else if ($scope.pwd == $scope.newPwd) { $scope.result = "新舊密碼不能一致"; } } });
之后具體的顯示信息可以在具體化,基本思路是利用angular的 雙向數(shù)據(jù)綁定來進(jìn)行數(shù)據(jù)分析,從而顯示不同的信息。
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
- angularjs2 ng2 密碼隱藏顯示的實(shí)例代碼
- Angularjs修改密碼的實(shí)例代碼
- angular仿支付寶密碼框輸入效果
- 在 Angular2 中實(shí)現(xiàn)自定義校驗(yàn)指令(確認(rèn)密碼)的方法
- AngularJs驗(yàn)證重復(fù)密碼的方法(兩種)
- angularjs 表單密碼驗(yàn)證自定義指令實(shí)現(xiàn)代碼
- Angular實(shí)現(xiàn)點(diǎn)擊按鈕控制隱藏和顯示功能示例
- Angular實(shí)現(xiàn)點(diǎn)擊按鈕后在上方顯示輸入內(nèi)容的方法
- AngularJS實(shí)現(xiàn)根據(jù)不同條件顯示不同控件
- AngularJS實(shí)時(shí)獲取并顯示密碼的方法
相關(guān)文章

Angular引入swiper后autoplay失效的解決辦法詳解

AngularJS實(shí)現(xiàn)的根據(jù)數(shù)量與單價(jià)計(jì)算總價(jià)功能示例

Angular實(shí)現(xiàn)表單驗(yàn)證功能

Angular JS 生成動(dòng)態(tài)二維碼的方法

詳解angular2如何手動(dòng)點(diǎn)擊特定元素上的點(diǎn)擊事件

AngularJS基礎(chǔ) ng-show 指令簡(jiǎn)單示例