Como usar “ng-model” em AngularJS com EXEMPLOS
James Hartmann
O que é modelo ng em AngularJs?
ng-model é uma diretiva em Angular.JS que representa modelos e seu objetivo principal é vincular a “visão” ao “modelo”.
Por exemplo, suponha que você queira apresentar ao usuário final uma página simples como a mostrada abaixo, que solicita ao usuário que insira o “Nome” e o “Sobrenome” nas caixas de texto. E então você queria garantir o armazenamento das informações que o usuário inseriu em seu modelo de dados.
Você pode usar a diretiva ng-model para mapear os campos da caixa de texto “Nome” e “Sobrenome” para o seu modelo de dados.
A diretiva ng-model garantirá que os dados da “visualização” e do seu “modelo” sejam mantidos sincronizados o tempo todo.
O atributo ng-model
Conforme discutido na introdução deste capítulo, o atributo ng-model é usado para vincular os dados do seu modelo à visualização apresentada ao usuário.
O atributo ng-model é usado para,
- Vinculando controles como entrada, área de texto e seleções na vista ao modelo.
- Forneça um comportamento de validação – por exemplo, uma validação pode ser adicionada a uma caixa de texto onde apenas caracteres numéricos podem ser inseridos na caixa de texto.
- O atributo ng-model mantém o estado do controle (por estado, queremos dizer que o controle e os dados devem ser sempre mantidos em sincronia. Se o valor de nossos dados mudar, ele mudará automaticamente o valor no controle e vice-versa)
Como usar o modelo ng
1) Área de Texto
A tag de área de texto é usada para definir um controle de entrada de texto multilinha. A área de texto pode conter um número ilimitado de caracteres e o texto é renderizado em uma fonte de largura fixa.
Então agora vamos dar uma olhada em um exemplo simples de como podemos adicionar a diretiva ng-model a um controle de área de texto.
Neste exemplo, queremos mostrar como podemos passar uma string multilinha do controlador para a visualização e anexar esse valor ao controle da área de texto.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
<textarea rows="4" cols="50" ng-model="pDescription"></textarea><br><br>
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pDescription="This topic looks at how Angular JS works \nModels in Angular JS"});
</script>
</body>
</html>
Explicação do código:
- O diretiva do modelo ng é usado para anexar a variável de membro chamada “pDescription” para o controle “textarea”. O “pDescription” conterá na verdade o texto, que será passado para o controle da área de texto. Também mencionamos 2 atributos para o controle textarea que são rows=4 e cols=50. Esses atributos foram mencionados para que possamos mostrar múltiplas linhas de texto. Ao definir estes atributos a textarea passará a ter 4 linhas e 50 colunas para poder mostrar múltiplas linhas de texto.
- Aqui estamos anexando a variável de membro ao objeto de escopo chamado “pDescription” e colocando um valor de string na variável.
- Observe que estamos colocando o literal /n na string para que o texto possa ter várias linhas quando for exibido na área de texto. O literal /n divide o texto em múltiplas linhas para que ele possa ser renderizado no controle textarea como múltiplas linhas de texto.
Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.
Saída:
Da saída,
- Pode-se ver claramente que o valor atribuído ao pDescriptA variável ion como parte do objeto de escopo foi passada para o controle textarea.
- Posteriormente, ele foi exibido quando a página é carregada.
2) Elementos de entrada
A diretiva ng-model também pode ser aplicada aos elementos de entrada, como caixa de texto, caixas de seleção, botões de opção, etc.
Vejamos um exemplo de como podemos usar o modelo ng com o tipo de entrada “caixa de texto” e “caixa de seleção”.
Aqui teremos um tipo de entrada de texto que terá o nome “Guru99” e haverá 2 caixas de seleção, uma que estará marcada por padrão e a outra não estará marcada.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
Name : <input type="text" ng-model="pname"><br>
Topic : <br>
<input type="checkbox" ng-model="Topic.Controller">Controller<br>
<input type="checkbox" ng-model="Topic.Models">Models
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pname="Guru99";
$scope.Topic =
{
Controller:true,
Models:false
}; });
</script>
</body>
</html>
Explicação do código:
- O diretiva do modelo ng é usado para anexar a variável de membro chamada “pname” ao controle de texto do tipo de entrada. A variável “pname” conterá o texto “Guru99” que será repassado para o controle de entrada de texto. Observe que qualquer nome pode ser dado ao nome da variável membro.
- Aqui estamos definindo nossa primeira caixa de seleção “Controllers” que está anexada à variável de membro Topics.Controllers. A caixa de seleção será marcada para este controle de verificação.
- Aqui estamos definindo nossa primeira caixa de seleção “Modelos” que está anexada à variável de membro Topics.Models. A caixa de seleção não estará marcada para este controle de verificação.
- Aqui estamos anexando a variável de membro chamada “pName” e colocando um valor de string “Guru99”.
- Estamos declarando uma variável de array de membro chamada “Tópicos” e atribuindo a ela dois valores, o primeiro é “verdadeiro” e o segundo é “falso”. Portanto, quando a primeira caixa de seleção obtiver o valor verdadeiro, a caixa de seleção será marcada para este controle, e da mesma forma, como o segundo valor é falso, a caixa de seleção não será marcada para este controle.
Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.
Saída:
Da saída,
- Pode-se ver claramente que o valor atribuído à variável pName é “Guru99”
- Como o primeiro valor de verificação é “true” foi aprovado, a caixa de seleção está marcada para a caixa de seleção “Controladores”. Da mesma forma, como o segundo valor é falso, a caixa de seleção não está marcada para a caixa de seleção “Modelos”.
3) Selecione o elemento no menu suspenso
A diretiva ng-model também pode ser aplicada ao elemento select e usada para preencher os itens da lista de seleção.
Vejamos um exemplo de como podemos usar o modelo ng com o tipo de entrada selecionado.
Aqui teremos um tipo de entrada de texto que terá o nome “Guru99” e haverá uma lista de seleção com 2 itens de lista de “Controlador” e “Modelos”.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
Name : <input type="text" ng-model="pName" value="Guru99"><br>
Topic : <br>
<select ng-model="Topics">
<option>{{Topics.option1}}</option>
<option>{{Topics.option2}}</option>
</select>
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pName="Guru99";
$scope.Topics =
{
option1 : "Controller",
option2 : "Module"
}; });
</script>
</body>
</html>
- O diretiva do modelo ng é usado para anexar a variável de membro chamada “Tópicos” ao controle de tipo de seleção. Dentro do controle de seleção, para cada uma das opções, estamos anexando a variável membro de Topics.option1 para a primeira opção e Topics.option2 para a segunda opção.
- Aqui estamos definindo nossa variável de array Topics que contém 2 pares de valores-chave. O primeiro par tem o valor “Controladores” e o segundo tem o valor “Modelos”. Esses valores serão passados para selecionar a tag de entrada na visualização. Se o código for executado com sucesso, a seguinte saída será mostrada.
Saída:
Pela saída, pode-se observar que o valor atribuído à variável pName é “Guru99” e podemos observar que o controle de entrada select possui as opções de “Controladores” e “Modelos”.
Resumo
- Os modelos em Angular JS são representados pela diretiva ng-model. O objetivo principal desta diretiva é vincular a visão ao modelo. Como construir um controlador simples usando as diretivas ng-app, ng-controller e ng-model.
- A diretiva ng-model pode ser vinculada a um controle de entrada de “área de texto” e strings multilinhas podem ser passadas do controlador para a visualização.
- A diretiva ng-model pode ser vinculada a controles de entrada, como os controles de texto e caixa de seleção, para torná-los mais dinâmicos em tempo de execução.
- A diretiva ng-model também pode ser usada para preencher uma lista de seleção com opções que podem ser exibidas ao usuário.
