AngularJS前端頁面操作之用戶修改密碼功能示例
本文實例講述了AngularJS前端頁面操作之用戶修改密碼功能。分享給大家供大家參考，具體如下：
最近在做前端設(shè)計，主要使用的知識有AngularJS和nodejs來進行頁面顯示和數(shù)據(jù)請求、處理等工作。在設(shè)計頁面比如忘記密碼時，發(fā)現(xiàn)一個有效的設(shè)計思路是很重要的。
就以修改密碼為例，要將提示信息友好的展示給用戶，明確告訴用戶在操作的過程中那部分有問題，這需要定義詳細的變量以及能在頁面的不同位置顯示信息。下面的代碼是自己寫的一個簡單例子，記錄學(xué)習(xí)進程。
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ù)綁定來進行數(shù)據(jù)分析，從而顯示不同的信息。
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
相關(guān)文章
Angular.Js中ng-include指令的使用與實現(xiàn)
ng-include 指令用于包含外部的 HTML 文件。包含的內(nèi)容將作為指定元素的子節(jié)點。下面這篇文章主要給大家介紹了Angular.Js中ng-include指令的使用與實現(xiàn)的相關(guān)資料，文中介紹的非常詳細，需要的朋友們下面來一起看看吧。2017-05-05
這篇文章主要介紹了Angular.js去除頁面中顯示的空行方法，文中給出了詳細的示例代碼供大家參考學(xué)習(xí)，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要介紹了Angular開發(fā)實踐之服務(wù)端渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
angularjs實現(xiàn)搜索的關(guān)鍵字在正文中高亮出來
這篇文章主要介紹了angularjs實現(xiàn)搜索的關(guān)鍵字在正文中高亮出來，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Angular中的$watch、$watchGroup、$watchCollection
這篇文章主要介紹了Angular中的$watch、$watchGroup、$watchCollection ,需要的朋友可以參考下2017-06-06
AngularJS動態(tài)添加數(shù)據(jù)并刪除的實例
下面小編就為大家分享一篇AngularJS動態(tài)添加數(shù)據(jù)并刪除的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
詳解angularJs中關(guān)于ng-class的三種使用方式說明
本篇文章主要介紹了angularJs中關(guān)于ng-class的三種使用方式說明，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Angular 2.x學(xué)習(xí)教程之結(jié)構(gòu)指令詳解
結(jié)構(gòu)指令通過添加和刪除 DOM 元素來更改 DOM 布局。Angular 中兩個常見的結(jié)構(gòu)指令是 *ngIf 和 *ngFor，下面這篇文章主要給大家介紹了關(guān)于Angular 2.x結(jié)構(gòu)指令的相關(guān)資料，需要的朋友可以參考下。2017-05-05
AngularJs定時器$interval 和 $timeout詳解
這篇文章主要介紹了AngularJs定時器$interval 和 $timeout詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
本文給大家介紹AngularJS控制器繼承自另一控制器的相關(guān)內(nèi)容，小編認(rèn)為介紹的非常不錯，具有參考借鑒價值，感興趣的朋友參考下吧2016-05-05