我是HTML和Javascript的新手。我試圖在我的表單上顯示反饋,所以當用戶輸入與我的UserList物件中的密碼和用戶名相匹配的資訊時,它會回傳 "登錄成功",但我不能讓它作業。
如果你想看看它的運行情況,這里有一個plunker。https://plnkr.co/plunk/SRS21GqLPAVgA5JU
這是我的代碼:
var app = angular.module('plunker', [] )。)
app. 控制器('MainCtrl'/span>, ['$scope'/span>, '$http'/span>, function($scope, $http)/span>{
$scope.test = "測驗成功!"。
$scope.target = 'https://happybuildings.sim.vuw.ac.nz/api/brownsol/user_list.json'.
//從服務器上檢索用戶串列的JSON檔案。
$http.get($scope.target)
.then(function successCall(response)/span>{
$scope.output = "成功地從服務器檢索到userList"。
$scope.userList = response.data.users。
},
function errorCall(response){
$scope.output = "Error retrieving userList from the server"。
$scope.output = " - ErrorCode = "/span>
$scope.output = response.status。
});
$scope.loginValidator = function(/span>) {
for(var i = 0; i < userList.length; i ) {
if ($scope.usernameInput == userList[i].LoginName && $scope.passwordInput == userList[i].Password) {
$scope.feedback = '登錄成功'。
return true;
};
};
$scope. feedback = 'Login Failed';
};
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>/span>
<meta charset="utf-8"/>
<link rel="styleheet" href="style。 css">
<script data-require="[email protected]" src="https://code. angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app。 js"></script>>
</head>
<body ng-controller="MainCtrl">/span>
<p>{{test}}</p>/span>
<p>/span>{{output}}</p>/span>
<p>/span>{{userList}}</p>/span>
<div>/span>
<form>
登錄
< input type = "text"/span> placeholder = "username" ng-model = "usernameInput"> </input>>
< input type = "password"/span> placeholder = "password" ng-model = "passwordInput" > </input>>
< button type = "submit" placeholder = "login" ng-click = "loginValidator()" > login</button>
<p>{{feedback}}</p>
</form>/span>
</div>/span>
<p>第一個用戶名:{{userList[0].LoginName}}</p>/span>
<p>第一個密碼:{{userList[0].Password}}</p>/span>
</body>/span>
</html>
uj5u.com熱心網友回復:
函式$scope.loginValidator中的Typo。您沒有使用$scope.userList,而是使用了沒有定義的userList。檢查控制臺的錯誤。
$scope.loginValidator = function(/span>) {
for(var i = 0; i < $scope.userList.length; i ) {
if ($scope.usernameInput == $scope.userList[i] 。 LoginName && $scope.passwordInput == $scope.userList[i].Password) {
$scope.feedback = '登錄成功';
return true;
};
};
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/307474.html
標籤:
下一篇:<p>如何防止用戶多次提交一個表單?我現在的問題是,當用戶多次點擊提交按鈕時,它將創建多個用戶。它應該只創建一個用戶,并在創建另一個用戶之前等待。 <p>以下是我的情況:<
