O Componente caixa de checagem permite que o usuário escolha entre dois ou três estados para um item. Normalmente escolhas que são mutuamente exclusivas, por exemplo: definir um texto em “negrito” ou “não negrito”.
Figura 1 - Exemplo do componente rodando no browser
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome
Propriedade
Função
Conteúdo
content
Define o rótulo.
valor
ng-model
Propriedade AngularJS que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação.
Valor inicial
ng-initial-value
Define o status inicial ao carregar o componente checkbox.
Permitir Valores Nulos
crn-allow-null-values
Permite que a caixa de seleção possa ter três status: True, False e Null.
Requerido
ng-required
Define o preenchimento obrigatório pelo usuário.
identificador
id
Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.
Aba de Estilos
Na tabela abaixo está descrito o tipo de estilo disponível para o componente Checkbox.
Nome em português
Nome em inglês
Descrição
Texto
Text
Estiliza o texto do componente.
Permitir Valores Nulos
O componente Checkbox pode possuir dois status (true e false) ou três (true, false e indeterminate). O valor indeterminado normalmente é utilizado para informar que o usuário ainda não definiu esse campo, salvando-o como nulo no banco de dados.
Figura 2 - Os três valores do checkbox
Para permitir salvar o status Indeterminado no banco de dados, o campo da entidade no diagrama de dados deve estar configurado como Lógico (booleano) e a opção Não Nulo desmarcada.
Observação do componente
Se colocarmos um evento que obtenha e imprima o status do checkbox ao clicar no componente, teremos a sensação de que algo está errado. Pois quando quando marcamos o checkbox, o status impresso no console é false e quando desmarcamos o componente, o true é exibido. Isso ocorre pois a chamada para o evento é mais rápida do que a alteração do status. Assim, ao clicar no checkbox desmarcado, o evento vai ler o seu status (false), imprimir o status obtido (false) e só depois será alterado para true.
Figura 3 - Retorno no console
Podemos comprovar isso adicionando o bloco Dormir com o valor de 1 milissegundo antes do bloco imprime. Nesse caso, ao clicar no checkbox desmarcado, o evento aguardará 1 milissegundo, tempo suficiente para o checkbox alterar seu status antes do console exibir o valor true.