Validação de formulários
{%raw%}
<!DOCTYPE html>
<html lang="pt-br" ng-app="appsimples">
<head>
<meta charset="utf-8" />
<title>App Simples</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="HomeController">
<div class="container">
<h1>Cidades do Tocantins</h1>
<div class="row">
<div class="col-xs-6 col-md-6">
<h2>Lista de cidades</h2>
<p>
<div class="input-group">
<input type="text" class="form-control" ng-model="q" placeholder="Pesquisar...">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</p>
<table class="table table-hover table-striped">
<thead>
<tr>
<th>#</th>
<th>UF</th>
<th>Nome</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cidade in cidades | filter:q | orderBy:estado.uf">
<td>{{$index}}</td>
<td>{{cidade.estado.uf}}</td>
<td>{{cidade.nome}}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-6 col-md-6">
<h2>Cadastrar cidade</h2>
<form class="form" name="form" novalidate>
<div class="form-group">
<label for="nomeDaCidade">Nome
</label>
<input type="text" id="nomeDaCidade" name="nomeDaCidade" class="form-control" ng-model="cidade.nome" placeholder="Nome da cidade" required="" value="">
<div ng-show="form.$submitted || form.uEmail.$touched">
<div ng-show="form.nomeDaCidade.$error.required">Informe o nome da cidade</div>
</div>
</div>
<div class="form-group">
<label for="estado">Estado</label>
<select class="form-control" id="estado" name="estado" ng-model="cidade.estado.uf" required="" value="TO">
<option ng-repeat="estado in estados" value="{{estado.uf}}">{{estado.nome}}</option>
</select>
<div ng-show="form.$submitted || form.uEmail.$touched">
<div ng-show="form.estado.$error.required">Escolha um Estado da lista</div>
</div>
</div>
<div>
<button class="btn btn-default" type="submit" ng-click="salvar(cidade)">Salvar</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
{%endraw%}
{%raw%}
(function(){
function Cidade(estado, nome) {
this.estado = estado;
this.nome = nome;
}
function Estado(uf, nome) {
this.uf = uf;
this.nome = nome;
}
angular.module('appsimples', []).controller('HomeController', function($scope) {
function encontrarEstado(uf) {
for(var i = 0; i < $scope.estados.length; i++) {
if ($scope.estados[i].uf == uf) {
return $scope.estados[i];
}
}
return null;
}
$scope.estados = [
new Estado('TO', 'Tocantins'),
new Estado('SP', 'São Paulo'),
new Estado('MG', 'Minas Gerais')
];
$scope.cidades = [
new Cidade(encontrarEstado('TO'), 'Araguaína'),
new Cidade(encontrarEstado('TO'), 'Gurupi'),
new Cidade(encontrarEstado('TO'), 'Palmas'),
new Cidade(encontrarEstado('TO'), 'Porto Nacional'),
new Cidade(encontrarEstado('TO'), 'Paraíso do Tocantins'),
new Cidade(encontrarEstado('SP'), 'São Paulo'),
new Cidade(encontrarEstado('MG'), 'Belo Horizonte')];
$scope.salvar = function(cidade) {
if ($scope.form.$valid) {
$scope.cidades.push(angular.copy(cidade));
$scope.form.$setPristine();
$scope.cidade = {};
}
}
});
})();
{%endraw%}
Você pode ver o exemplo em funcionamento aqui.