Soy nuevo en HTML y Javascript. Estoy tratando de mostrar comentarios en mi formulario, por lo que cuando un usuario escribe una contraseña y un nombre de usuario coincidentes con los que tengo en mi objeto UserList, devuelve "inicio de sesión exitoso", pero no puedo hacer que esto funcione.
Aquí hay un plunker si quieres verlo en acción: https://plnkr.co/plunk/SRS21GqLPAVgA5JU
Aquí está mi código:
var app = angular.module('plunker', []); app.controller('MainCtrl', ['$scope', '$http', function($scope, $http){ $scope.test = "Test Successful!"; $scope.target = 'https://happybuildings.sim.vuw.ac.nz/api/brownsol/user_list.json' // retrieves userList JSON file from server $http.get($scope.target) .then(function successCall(response){ $scope.output = "Successfully retrieved userList from the server" $scope.userList = response.data.users; }, function errorCall(response){ $scope.output = "Error retrieving userList from the server " $scope.output += " - ErrorCode = " $scope.output += response.status; }); $scope.loginValidator = function() { for(var i = 0; i < userList.length; i++) { if ($scope.usernameInput == userList[i].LoginName && $scope.passwordInput == userList[i].Password) { $scope.feedback = 'Login Successful'; return true; }; }; $scope.feedback = 'Login Failed'; }; }]); <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="style.css"> <script data-require="angular.js@1.4.x" 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"> <p>{{test}}</p> <p>{{output}}</p> <p>{{userList}}</p> <div> <form> log in <input type = "text" placeholder = "username" ng-model = "usernameInput"></input> <input type = "password" placeholder = "password" ng-model = "passwordInput"></input> <button type = "submit" placeholder = "login" ng-click = "loginValidator()">login</button> <p>{{feedback}}</p> </form> </div> <p>the first username: {{userList[0].LoginName}}</p> <p>the first password: {{userList[0].Password}}</p> </body> </html>Error tipográfico en la función $scope.loginValidator . En lugar de $scope.userList , ha utilizado userList que no está definido. Compruebe la consola en busca de errores.
$scope.loginValidator = function() { for(var i = 0; i < $scope.userList.length; i++) { if ($scope.usernameInput == $scope.userList[i].LoginName && $scope.passwordInput == $scope.userList[i].Password) { $scope.feedback = 'Login Successful'; return true; }; };