O que é ng-model em AngularJs?
ng-model é uma diretiva em Angular.JS que representa modelos e seu objetivo principal é vincular a "visualização" ao "modelo".
Por exemplo, suponha que você queira apresentar uma página simples ao usuário final como a mostrada abaixo, que pede ao usuário para inserir 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 de "Nome" e "Sobrenome" para seu modelo de dados.
A diretiva ng-model garantirá que os dados na "visualização" e no seu "modelo" sejam mantidos sincronizados o tempo todo.
Neste tutorial, você aprenderá-
- O atributo ng-model
- Como usar o modelo ng
- Área de Texto
- Elementos de entrada
- Selecionar lista suspensa do formulário de elemento
O atributo ng-model
Conforme discutido na introdução deste capítulo, o atributo ng-model é usado para vincular os dados em seu modelo à visualização apresentada ao usuário.
O atributo ng-model é usado para,
- Controles de vinculação, como entrada, área de texto e seleções na visualização do modelo.
- Fornece um comportamento de validação - por exemplo, uma validação pode ser adicionada a uma caixa de texto em que 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 estar sempre sincronizados. 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 marca da área de texto é usada para definir um controle de entrada de texto de várias linhas. A área de texto pode conter um número ilimitado de caracteres e o texto é renderizado em uma fonte de largura fixa.
Portanto, agora vamos ver 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.
Event Registration Guru99 Global Event
Explicação do código:
- A diretiva ng-model é usada para anexar a variável de membro chamada "pDescription" ao controle "textarea".
A variável "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 é rows = 4 e cols = 50. Esses atributos foram mencionados para que possamos mostrar várias linhas de texto. Ao definir esses atributos, a textarea agora terá 4 linhas e 50 colunas para que possa mostrar várias 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 várias linhas para que ele possa ser renderizado no controle textarea como várias linhas de texto.
Se o código for executado com êxito, a seguinte saída será mostrada quando você executar o código no navegador.
Resultado:
Da saída
- Pode ser visto claramente que o valor atribuído à variável pDescription como parte do objeto de escopo foi passado para o controle textarea.
- Posteriormente, ele foi exibido quando a página foi 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 os tipos de entrada "caixa de texto" e "caixa de seleção".
Aqui teremos um tipo de entrada de texto que terá o nome de "Guru99" e haverá 2 caixas de seleção, uma que será marcada por padrão e a outra não será marcada.
Event Registration Guru99 Global Event
Explicação do código:
- A diretiva ng-model é usada para anexar a variável de membro chamada "pname" ao controle de texto do tipo de entrada. A variável "pname" conterá o texto de "Guru99" que será passado para o controle de entrada de texto. Observe que qualquer nome pode ser atribuído ao nome da variável de membro.
- Aqui, estamos definindo nossa primeira caixa de seleção "Controladores", que está anexada à variável membro Topics.Controllers. A caixa de seleção será marcada para este controle de seleção.
- Aqui, estamos definindo nossa primeira caixa de seleção "Modelos", que está anexada à variável membro Topics.Models. A caixa de seleção não será marcada para este controle de seleção.
- Aqui estamos anexando a variável membro chamada "pName" e colocando um valor de string de "Guru99".
- Estamos declarando uma variável de matriz de membro chamada "Tópicos" e dando a ela dois valores, o primeiro é "verdadeiro" e o segundo é "falso".
Portanto, quando a primeira caixa de seleção obtém 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 êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
Da saída,
- Pode ser visto claramente que o valor atribuído à variável pName é "Guru99"
- Como o primeiro valor de verificação é "verdadeiro", ele passou, 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 a lista suspensa do formulário de elemento
A diretiva ng-model também pode ser aplicada ao elemento de seleção e ser usada para preencher os itens da lista na 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 de "Guru99" e haverá uma lista de seleção com 2 itens de lista de "Controlador" e "Modelos".
Event Registration Guru99 Global Event
- A diretiva ng-model é usada 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 de membro de Topics.option1 para a primeira opção e Topics.option2 para a segunda opção.
- Aqui, estamos definindo nossa variável de matriz Topics, que contém 2 pares de valores-chave. O primeiro par tem o valor de "Controladores" e o segundo tem o valor de "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á exibida.
Resultado:
Na saída, pode-se ver que o valor atribuído à variável pName é "Guru99" e podemos ver que o controle de entrada de seleção 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 visualizaçã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 de várias linhas 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 para o usuário.