Question :
I would like to make this form check the following data by clicking “Confirm” and if any of them is correct it will go to the next page.
MOCK:
$scope.cliente = [{
nome: "nomeedit",
senha: "senhaedit",
email: "nomeedit@senha.com"
}, {
nome: "nomezinho",
senha: "senhazinha",
email: "nome@senhazinha.com"
}, {
nome: "nomelegal",
senha: "senhalegal",
email: "nome@senhalegal.com"
}, {
nome: "meunome",
senha: "minhasenha",
email: "meunome@senha.com"
}, {
nome: "nome",
senha: "senha",
email: "nome@senha.com"
}];
HTML:
<div class="container" ng-app="ClienteApp" ng-controller="ClienteController">
<div class="form-group">
<div class="input-group">
<label>Nome:</label>
<input type="text" class="form-control" ng-model="nome">
</div>
<div class="input-group">
<label>Telefone:</label>
<input type="text" class="form-control" ng-model="telefone">
</div>
</div>
<a href="#" class="btn btn-sucess btn-sm" ng-click="consultar();">Confirmar</a>
Answer :
I gave a very simple example of how to solve this problem:
function LoginController($scope) {
$scope.cliente = [{
nome: "nomeedit",
senha: "senhaedit",
email: "nomeedit@senha.com"
}, {
nome: "nomezinho",
senha: "senhazinha",
email: "nome@senhazinha.com"
}, {
nome: "nomelegal",
senha: "senhalegal",
email: "nome@senhalegal.com"
}, {
nome: "meunome",
senha: "minhasenha",
email: "meunome@senha.com"
}, {
nome: "nome",
senha: "senha",
email: "nome@senha.com"
}];
$scope.consultar = function(user) {
var verifica = false;
//Faz um laço pegando cada cliente($scope.cliente)
angular.forEach($scope.cliente, function(cliente) {
//Se o nome do usuário e senha que vieram da página forem iguais a algum nome da lista de clientes então verifica recebe verdadeiro!
if (user.nome == cliente.nome && user.senha == cliente.senha) {
verifica = true;
//Caso contrário recebe falso
} else {
verifica = false;
}
});
//Se a variavel verifica for true então exibe um alerta positivo e envia para a pagina desejada
if (verifica) {
$scope.submitted = true;
$scope.message = "Usuário Válido";
$scope.classAlert = "alert alert-success";
//carrega outra página, aqui podemos utilizar a diretiva $location
//$location.path("/pagina");
//Se não exibe um alerta de erro
} else {
$scope.submitted = true;
$scope.message = "Usuário Inválido";
$scope.classAlert = "alert alert-danger";
}
};
}@import url('http://getbootstrap.com/dist/css/bootstrap.css');<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-appng-controller="LoginController">
<form class="form-inline" role="form">
<div ng-class="classAlert" ng-show="submitted || showAlert">{{message}}
<button class="close" data-dismiss="alert">x</button>
</div>
<div class="form-group">
<label>Nome:</label>
<input type="text" class="form-control" ng-model="user.nome">
</div>
<div class="form-group">
<label>Senha:</label>
<input type="password" class="form-control" ng-model="user.senha">
</div>
<button type="button" class="btn btn-default" ng-click="consultar(user)">Submit</button>
</form>
</div> Just do a test with the values in your list, to be redirected to another page you can use the $location directive. But for this it is recommended that you configure your routes first.
Example:
$location.path("/home");
In this example after some action I call the page that is configured with the home route.
Example of how to configure a route, for that we use $routeProvider :
angular.module (“system”). config (function ($ routeProvider) {
$routeProvider.when("/home", {
templateUrl: "public/views/login.html",
controller: "loginController"
}
More information: routeProvider , location
I recommend that you do not authenticate in this way. Never expose user authentication data.
Anyway, to check if a particular object is part of an array, just iterate over it and check field by field.
Ex:
$scope.cliente.forEach(function(cliente) {
if ($scope.nome === cliente.nome && $scope.senha === cliente.senha) {
// Lógica para prosseguir entra aqui
}
})
But reinforcing again that doing this query on the client is the worst security flaw your code could have.