- Criado por Deborah Melo de Carvalho, última alteração por Igor Andrade em 30/04/2020
Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
« Anterior Versão 28 Próxima »
Função
Esse componente exibe uma lista de opções obtidas a partir de uma fonte de dados, possui um campo de pesquisa para filtrar seu conteúdo
Figura 1.1 - Exemplo do componente rodando no browser
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.
Nome | Propriedade | Função |
---|---|---|
Configuração | options | Abre uma janela para personalização do componente. |
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. |
Requerido | ng-required | Define que o campo é de preenchimento obrigatório. |
identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Exibir | ng-show | Propriedade AngularJS usada para exibir ou oculta o componente. |
Segurança | cronapp-security | Abre a janela de seleção dos grupos com permissões para visualização ou edição. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Configuração
A janela Configuração possui diversas propriedades para personalizar e adicionar novos elementos a Caixa de seleção dinâmica. Para abrir a janela de configurações, selecione o componente no editor visual, exibindo suas propriedades no menu lateral, e clique no botão “...” da propriedade Configuração. (Figura 2.2)
Figura 2.1 - Janela de configuração
- Campo do item selecionado: exibe o elemento selecionado;
- Campo de pesquisa: permite filtrar a lista;
- Linha vazia, limpa a última seleção;
- Cabeçalho: exibe o conteúdo inserido na aba Cabeçalho da janela de configurações;
- Lista: exibe a lista com o filtro do campo de pesquisa;
- Rodapé: exibe o conteúdo inserido na aba Rodapé da janela de configurações.
Aba Geral
Possui as principais propriedades da Caixa de seleção fixa.
Ao solicitar o valor do campo da Caixa de seleção dinâmica, sempre será retornado o identificador do elemento selecionado.
Figura 2.2 - Aba Geral da janela de configurações do componente
Fonte de dados: seleciona ou cria uma fonte de dados para alimentar o componente. Para saber mais sobre como configura uma fonte de dados, acesse o link ao lado: Fonte de Dados
"+": adiciona uma fonte de dados.
"...": configura uma fonte de dados.
Tipo Filtro: define a forma de filtragem dos dados, podendo ser:
Contendo: mostra as opções que contêm a sequência das letras digitadas;
Iniciando com: mostra as opções que comecem com a sequência das letras digitadas;
Final com: mostra as opções que terminem com a sequência das letras digitadas;
Campo Texto: define o campo da fonte de dados que será exibido para o usuário;
Modificar texto em: modifica outro componente na tela com o conteúdo do Campo Texto;
Campo Chave: define o identificador de retorno do campo Texto selecionado pelo usuário;
Máscara: define a forma como será apresentado o valor. Selecione uma máscara pronta ou crie uma.
Texto do rótulo: define o conteúdo do campo como a primeira opção (estático) da caixa de seleção. É possível internacionalizá-lo clicando no ícone no final do campo.
Valor do rótulo: define um identificador para o conteúdo inserido no campo Texto do rótulo. É possível internacionalizá-lo clicando no ícone no final do campo.
Permitir valor nulo: marcando essa opção, quando o usuário selecionar a opção do campo Texto do rótulo o valor nulo é retornado. O campo Valor do Rótulo fica desabilitado quando essa opção está ativa.
Valor Inicial: determina qual será a primeira opção apresentada na caixa de seleção, antes de mostrar todas as opções. Esse campo fica disponível quando a opção ao iniciar usar valor do primeiro registro não está marcada. Sua determinação fica a critério do usuário, que pode utilizar blocos de programação, expressão ou o campo de tela;
Ao iniciar usar valor do primeiro registro: marque essa opção para deixar marcado o primeiro registro da fonte de dados;
Usar valor primitivo: é o valor default, utilizado quando tinha-se os problemas de integração com os valores dos objetos que eram repassados para a caixa;
Alterar cursor ao modificar: coloca o cursor do registro selecionado na caixa de seleção dinâmica no banco de dados;
Usar Template Personalizado: ao selecionar, as abas Elementos e Valores são exibidas para personalizar, respectivamente, o modo como será exibido os elementos da lista e o modo como será exibido o item selecionado.
Cabeçalho
Na aba Cabeçalho é possível adicionar texto ou elementos HTML - podendo ser de parágrafo, imagem, entre outros - e, assim, criar uma área no início da lista de opções exibidas pelo componente.
O conteúdo inserido nessa aba será exibido na área destacada pelo item 3 da figura 2.1
Figura 2.3 - Adicionando um cabeçalho ao componente
Aba rodapé
Na aba Rodapé é possível adicionar texto ou HTML - podendo ser de parágrafo, imagem, entre outros - e, assim, criar uma área no final da lista de opções exibidas pelo componente.
O conteúdo inserido nessa aba será exibido na área destacada pelo item 6 da figura 2.1
Figura 2.4 - Adicionando um rodapé ao componente
Aba Elementos
A aba Elementos só será exibida ao selecionar a opção Usar Template Personalizado na aba Geral.
Nela podemos definir como serão exibidos os itens da lista para seleção, é possível inserir os atributos dos objetos de forma dinâmica e conteúdo estático, inclusive HTML. O conteúdo inserido nessa aba será exibido na área destacada pelo item 5 da figura 2.1
Para exibir os atributos dos itens da fonte de dados, use a seguinte notação: #: data.<Campo da Fonte de dados> #
.
Figura 2.5 - Personalização dos elementos da lista
Valores
A aba Valores só será exibida ao selecionar a opção Usar Template Personalizado na aba Geral.
Nela podemos definir como será exibido o item selecionado, é possível inserir os atributos dos objetos de forma dinâmica e conteúdo estático, inclusive HTML. O conteúdo inserido nessa aba será exibido na área destacada pelo item 1 da figura 2.1
Para exibir os atributos dos itens da fonte de dados, use a seguinte notação: #: data.<Campo da Fonte de dados> #
.
Figura 2.6 - Personalização do elemento selecionado
Nome em inglês
Dynamic Combobox
Nessa página
Compatibilidade
Formulário web
Equivalente web / mobile
O link será adicionado no final, após todos os componentes criados.
Botão do Componente
Imagem no Editor Visual
- Sem rótulos