Aprender e aperfeiçoar como fazer certas tarefas diárias usando o Angular pode impulsionar sua carreira muito rápido, especialmente se você for novo no . Neste artigo, iremos discutir sobre uma tarefa que um desenvolvedor deve ter feito milhares de vezes: a criação de uma caixa suspensa humilde. Os seguintes tópicos serão abordados neste blog:
O que é Angular?
Bem, se você estiver lendo um blog sobre como fazer uma caixa suspensa usando o Angular, pode-se supor que você já tenha uma ideia geral do Angular. Para aqueles de vocês que não conhecem e toparam com este blog devido aos caprichos e caprichos da internet, é uma estrutura de desenvolvimento de front-end. Ele é desenvolvido e mantido pelo gigante da tecnologia, Google. Ele fornece uma maneira modular de desenvolver aplicativos da web de uma única página, como Gmail, PayPal e Lego. Aplicativos construídos usando Angular implementam a abordagem Model-View-View-Model.
O que é uma caixa suspensa?
Uma caixa suspensa é um método limpo de mostrar uma série de opções, pois apenas uma opção é exibida inicialmente até que o usuário ative a caixa suspensa. Para adicionar uma caixa suspensa a uma página da web, você usaria um selecionar elemento ou um item da lista . A primeira tag no elemento de seleção precisa ter a opção selecionada definida para o valor de selecionado. Aqui está um pequeno trecho de código para mostrar o que quero dizer.
Opção 1 Opção 2 Opção 3
Claro, o código acima precisaria de seu javascript específico para ter o comportamento esperado, mas o esqueleto básico de um menu suspenso permanece o mesmo. Vamos ver como fazemos isso no Angular agora.
valor padrão de char em java
Caixa suspensa usando Angular
Falando honestamente, seria um tanto assustador demonstrar todas as maneiras possíveis de implementar uma caixa suspensa no angular. O cérebro de cada desenvolvedor lida com a lógica de uma maneira única e eu vi alguns menus suspensos malucos em minha carreira. Serei humilde e mostrarei a vocês uma abordagem de menu suspenso bastante básica.
Método 1: Fazendo uma lista suspensa usando opções ng
Você pode usar as opções de ng para criar um menu suspenso a partir de uma matriz ou lista de itens.
var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})Método 2: fazendo uma lista suspensa usando ng-repeat
Angular sendo um versátil , obviamente tem várias maneiras de criar um menu suspenso básico. A diretiva ng-repeat repete um bloco de código HTML para cada item em um array, ela pode ser usada para criar opções em uma lista suspensa, mas a diretiva ng-options foi feita especialmente para preencher uma lista suspensa com opções e tem uma importante vantagem, isto é, menus suspensos feitos com opções de ng permitem que o valor selecionado seja um objeto, enquanto menus suspensos feitos de repetição de ng tem que ser uma string.
tableau como criar um conjunto
Este snippet de código específico implementa a mesma lista usando ng-repeat
{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})Isso nos leva ao final deste blog bastante curto “lista suspensa usando angular”. Espero que agora você tenha uma ideia de como pode implementar um menu suspenso em seu próprio projeto. Se você tiver alguma dúvida em relação a este blog, pode postá-la como um comentário na seção de comentários abaixo. Você também pode compartilhar sua própria maneira criativa de fazer uma caixa suspensa.
Se você deseja saber mais sobre a estrutura Angular, consulte nosso que vem com treinamento ao vivo conduzido por instrutor e experiência em projetos da vida real. Este treinamento o ajudará a entender o Angular em profundidade e a obter domínio sobre o assunto.
Tem alguma questão para nós? Mencione isso na seção de comentários de ”Angular Dropdown” e eu entrarei em contato com você.