I'm starting to get in touch with AngularJS and I've developed a simple registration application where I can insert and delete data. But I'm having trouble implementing the edit function.
I'm just using a Form and I'm trying to keep the function from editing using this same form. But I still could not get it to work properly. Here are the codes I made with the last change to the edit function.
<!DOCTYPE html>
<html ng-app="cadastro">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BonilhaTech - Cadastro de Usuários</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.usuario-conteudo {
background-color: #EEE;
padding: 20px 20px 10px 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="usuario-conteudo" ng-controller="UsuarioController">
<div class="boasvindas" >
<h1 style="text-align: center"> {{myHeader}} </h1>
</div>
<h1>Cadastro de Usuários</h1>
<form name="formulario" ng-if="update">
<div class="form-group">
<label for="nome">Nome*</label>
<input type="text" class="form-control" id="nome" placeholder="Nome do usuário"
maxlength="20" required ng-model="usuario.nome">
</div>
<div class="form-group has-feedback {{statusSenha.classe}}">
<label for="senha">Senha*</label>
<input type="password" class="form-control" id="senha" placeholder="Informe a senha do Usuário"
maxlength="10" required ng-model="usuario.senha" ng-change="validarSenha()">
<span class="glyphicon form-control-feedback {{statusSenha.icone}}" aria-hidden="true"></span>
<p class="help-block">{{statusSenha.mensagem}}</p>
</div>
<div class="form-group has-edit">
<label for="nome">Para editar os dados, utilizar os campos abaixo:</label>
<input type="text" class="form-control" placeholder="Altere o nome do usuário" maxlength="20"
required ng-model="update.name">
<input type="password" class="form-control" required ng-model="update.senha"placeholder="Altere a senha do Usuário"
maxlength="10" ng-change="validarSenha()">
<span class="glyphicon form-control-feedback {{statusSenha.icone}}" aria-hidden="true"></span>
<p class="help-block">{{statusSenha.mensagem}}</p>
</div>
<button type="submit" class="btn btn-primary" ng-submit="cadastrar()">Cadastrar</button>
<button ng-click="salvar()" ng-submit="salvar()" class="btn btn-primary">Editar</button>
</form>
<hr>
<h1>Lista de Usuários: </h1>
<table class="table table-striped" ng-hide="UsuarioController.usuarios == 0">
<thead>
<tr>
<th>Nome</th>
<th>Senha</th>
<th>Ação</th>
</tr>
</thead>
<tbody>
<!-- Aqui serão exibidos os dados do usuários cadastrados -->
<tr ng-repeat="usuario in usuarios">
<td>{{usuario.nome}}</td>
<td>{{usuario.senha}}</td>
<td><button class="btn btn-danger btn-xs" ng-click="remover($index)">Remover</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script><scriptsrc="app.js"></script>
</body>
</html>
Controller JavaScript code:
(function() {
'use strict';
angular.module('cadastro', [])
.controller('UsuarioController', function($scope, $timeout) {
//mensagem de Boas-Vindas
$scope.myHeader = "BemVindo!";
$timeout(function() {
$scope.myHeader = "Welcome!";
}, 5000);
// lista de usuários pré cadastrados
$scope.usuarios = [
{ nome: 'Guerra', senha: '1234' },
{ nome: 'Jô', senha: '12345' },
{ nome: 'Pratto', senha: '12345678' },
{ nome: 'Ricardo Oliveira', senha: '1234' }
];
//inicialização de um usuário vazio
$scope.usuario = { nome: '', senha: '' };
//método para adicionar o usuário a lista
$scope.cadastrar = function() {
$scope.usuarios.push($scope.usuario);
$scope.usuario = { nome: '', senha: '' };
};
//método para remover o usuário da lista
$scope.remover = function(index) {
$scope.usuarios.splice(index, 1);
};
//método para validar a senha do usuário
$scope.validarSenha = function() {
$scope.statusSenha = {
classe: '',
icone: '',
mensagem: ''
};
if ($scope.usuario.senha && $scope.usuario.senha.length >= 8) {
$scope.statusSenha.classe = 'has-success';
$scope.statusSenha.icone = 'glyphicon-ok';
$scope.statusSenha.mensagem = 'Esta senha é forte, parabéns cabaço!';
} else {
$scope.statusSenha.classe = 'has-error';
$scope.statusSenha.icone = 'glyphicon-remove';
$scope.statusSenha.mensagem = 'Faça um favor a si mesmo, apaga isso e tente novamente.';
}
};
//método para salvar e editar o nome e senha do usuário
$scope.editar = function(user, i) {
$scope.update = angular.copy(user);
index = i;
}
$scope.salvar = function() {
$scope.users[index] = $scope.update;
$scope.update = "";
}
});
});
})();