AngularJS - Entradas em Formulários

Gerenciamento de dados de formulário

Nas aplicações web a forma mais natural de obter dados do usuário é através de formulários, com eles podemos criar elementos que capturem texto ou simples confirmações como checkboxes, mas tudo isso pode ser traduzido como dados do usuário, com eles podemos fazer diferentes processamentos.
Em AngularJS Trabalhar com essas entradas de dados é muito simples, pois pela forma como a biblioteca foi desenhada, podemos transformar parte desses dados que recebemos em ações em nossa aplicação, seja para fazer cálculos ou para definir seu comportamento.
Nesta seção, veremos um pouco mais sobre como lidar com a entrada em formulários usando AngularJS.
Como funciona?A maneira como podemos fazer a união entre os elementos de entrada e nossa lógica em AngularJS é muito simples, precisamos usar a propriedade modelo ng e tudo terá uma espécie de relacionamento, então o valor do que entramos pela forma pode ser manipulado em AngularJS, isso pode se aplicar a texto de entrada, botões de opção, caixa de seleção, etc..
Vejamos abaixo um pequeno exemplo do que estamos explicando:

O que acontece aqui é que dentro do escopo de Nosso Controlador podemos manipular o que o usuário faz no caixa de seleção do marcador, então, se o usuário marcar, receberemos imediatamente marcador como verdadeiro e se você desmarcar, teremos a resposta oposta.
Podemos ir um pouco mais longe e podemos definir Nosso Controlador que marcador é marcada por padrão, então, quando o usuário vir a página pela primeira vez, a caixa de seleção será marcada.
Adicionar Ações
Mas não apenas na captura dos dados que devemos permanecer, podemos e precisamos incluir ações, uma vez que recebemos as entradas, em AngularJS Podemos chamar funções e métodos que são executados em um evento do nosso elemento de entrada, por exemplo, vamos fazer uma pequena calculadora que leva a estimativa de investimento para fazer um empreendimento, o que faremos é multiplicar o valor recebido por 10, vamos Vejo:
1- Primeiro devemos estabelecer os elementos HTML que vamos usar, pois no exemplo anterior vamos criar um controlador e o a entrada fará parte do nosso modelo:

PROLONGAR

2- Vemos que introduzimos uma nova propriedade ng-change e atribuímos a chamada a uma função chamada calculoInversion () Isso significa que toda vez que nosso campo de entrada mudar, a função será chamada, como podemos ver que é algo muito simples.
3- Agora vamos construir o código com AngularJS que dará vida ao que vimos:

4- Construímos o controlador apropriado, então indicamos um valor inicial para o modelo, neste caso igualamos a 0, isso inclui ambos os elementos Estimativa inicial O que necessário, então criamos a função calculoInversion () Vemos que o fazemos no chamado escopo do nosso controlador, desta forma ele está associado ao nosso elemento. Com isso, nosso aplicativo deve funcionar em um nível básico.
Claro que faltam várias validações neste exemplo e só leva em consideração quando o usuário altera o valor do texto de entrada, mas serve como uma introdução para incluir ações em nossos aplicativos escritos com AngularJS.
Anteriorpagina 1 de 2Próximo