AngularJS前端頁面操作之用戶修改密碼功能示例
本文實(shí)例講述了AngularJS前端頁面操作之用戶修改密碼功能。分享給大家供大家參考,具體如下:
最近在做前端設(shè)計,主要使用的知識有AngularJS和nodejs來進(jìn)行頁面顯示和數(shù)據(jù)請求、處理等工作。在設(shè)計頁面比如忘記密碼時,發(fā)現(xiàn)一個有效的設(shè)計思路是很重要的。
就以修改密碼為例,要將提示信息友好的展示給用戶,明確告訴用戶在操作的過程中那部分有問題,這需要定義詳細(xì)的變量以及能在頁面的不同位置顯示信息。下面的代碼是自己寫的一個簡單例子,記錄學(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 = "請?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é)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
- 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í)時獲取并顯示密碼的方法
相關(guān)文章
Angular引入swiper后autoplay失效的解決辦法詳解
AngularJS實(shí)現(xiàn)的根據(jù)數(shù)量與單價計算總價功能示例
Angular實(shí)現(xiàn)表單驗(yàn)證功能
詳解angular2如何手動點(diǎn)擊特定元素上的點(diǎn)擊事件
AngularJS基礎(chǔ) ng-show 指令簡單示例

