 |
|
||||
 Planilha Web - Planilhas e Calculadoras online para estudantes e profissionais de Engenharia Civil, Engenharia Elétrica e Engenharia Mecânica. |
|||||
Você está aqui: AngularJS ::: Angular / AngularJS + JavaScript ::: Formulários HTML e elementos de formulários - AngularJS Forms |
Como retornar e/ou definir o conteúdo de uma caixa de texto em AngularJSQuantidade de visualizações: 1990 vezes |
|
Neste exemplo mostrarei como podemos acessar o conteúdo de uma caixa de texto input type text em um formulário, tanto para exibir quanto para modificar seu valor. Para isso vamos usar dois botões e duas funções no controller ClientesController. Veja também que usamos a diretiva ng-model para associar a caixa de texto com a variável nome colocada no $scope. Ao fazermos isso, qualquer mudança no conteúdo da caixa de texto automaticamente refletirá na variável no $scope e vice-versa. Veja o código completo:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cadastro de Clientes AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js">
</script>
</head>
<body>
<script type="text/javascript">
// vamos criar uma nova aplicação
var app = angular.module('CadClientes', []);
// vamos criar o controller ClientesController
app.controller('ClientesController', function ($scope, $window){
// vai guardar o nome do cliente
$scope.nome = "";
// função para obter o nome do cliente
$scope.obterNome = function(){
$window.alert("Nome do cliente: " + $scope.nome);
};
// função para definir o nome do cliente
$scope.definirNome = function(){
$scope.nome = "Osmar J. Silva";
};
});
</script>
<div ng-app="CadClientes" ng-controller="ClientesController">
<form>
Nome do Cliente: <input type="text" ng-model="nome" id="nome" />
<input type="button" ng-click="obterNome()" value="Obter nome" />
<input type="button" ng-click="definirNome()" value="Definir nome" />
</form>
</div>
</body>
</html>
|
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de AngularJS |
Dicas e truques de outras linguagens |
|
Dart - Como testar se um ponto está dentro de um círculo em Dart - Desenvolvimento de Games com Dart Java - Como retornar os índices dos itens selecionados em uma JList de seleção múltipla do Java Swing |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
