Изучение и совершенствование того, как выполнять определенные повседневные задачи с помощью Angular, может довольно быстро повысить вашу карьеру, особенно если вы новичок в . В этой статье мы обсудим одну задачу, которую разработчик должен был выполнять тысячи раз: создание простого раскрывающегося списка. В этом блоге будут рассмотрены следующие темы:
- Что такое Angular?
- Что такое раскрывающийся список?
- Создание раскрывающегося списка с помощью Angular.
Что такое Angular?
Что ж, если вы читаете блог о том, как создать раскрывающийся список с помощью Angular, можно предположить, что вы уже имеете общее представление об Angular. Для тех из вас, кто этого не сделал и наткнулся на этот блог из-за прихотей и прихотей Интернета, это интерфейсная среда разработки. Он разработан и поддерживается техническим гигантом Google. Он предоставляет модульный способ разработки одностраничных веб-приложений, таких как Gmail, PayPal и Lego. Приложения, созданные с использованием Angular, реализуют подход модель-представление-представление-модель.
Что такое раскрывающийся список?
Раскрывающийся список - это чистый метод отображения массива вариантов, поскольку изначально отображается только один вариант, пока пользователь не активирует раскрывающееся окно. Чтобы добавить раскрывающийся список на веб-страницу, вы должны использовать Выбрать элемент или пункт списка . Для первого тега в элементе select необходимо, чтобы для параметра selected было установлено значение selected. Вот небольшой фрагмент кода, чтобы понять, что я имею в виду.
почему я должен изучать sql
Вариант 1 Вариант 2 Вариант 3
Конечно, для приведенного выше кода потребуется его конкретный javascript, чтобы иметь ожидаемое поведение, но основной каркас выпадающего меню остается прежним. Давайте теперь посмотрим, как мы это делаем в Angular.
Выпадающее окно с использованием Angular
Честно говоря, было бы довольно сложно продемонстрировать все возможные способы реализации выпадающего списка в angular. Мозг каждого разработчика обрабатывает логику по-своему, и за свою карьеру я видел несколько безумных выпадающих меню. Я буду скромным и покажу вам довольно простой подход с раскрывающимся меню.
Метод 1: создание выпадающего списка с помощью ng-options
Вы можете использовать ng-options для создания раскрывающегося меню из массива или списка элементов.
функция Фибоначчи c ++
var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})Метод 2: создание раскрывающегося списка с помощью ng-repeat
Angular - универсальный , очевидно, имеет несколько способов создать базовое раскрывающееся меню. Директива ng-repeat повторяет блок HTML-кода для каждого элемента в массиве, ее можно использовать для создания параметров в раскрывающемся списке, но директива ng-options была создана специально для заполнения раскрывающегося списка параметрами и имеет одну важную преимущество, т.е. выпадающие меню, созданные с помощью ng-options, позволяют выбранному значению быть объектом, в то время как выпадающие меню, созданные из ng-repeat, должны быть строкой.
Этот конкретный фрагмент кода реализует тот же список с помощью ng-repeat
{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})На этом мы подошли к концу этого довольно короткого «выпадающего списка с использованием angular» в блоге. Надеюсь, теперь у вас есть представление о том, как реализовать раскрывающееся меню в собственном проекте. Если у вас есть какие-либо сомнения относительно этого блога, вы можете опубликовать их как комментарий в разделе комментариев ниже. Вы также можете поделиться своим собственным творческим способом создания раскрывающегося списка.
что такое анаконда для питона
Если вы хотите узнать больше о фреймворке Angular, ознакомьтесь с нашими который включает в себя живое обучение под руководством инструктора и реальный проектный опыт. Этот тренинг поможет вам глубже понять Angular и достичь мастерства в этой теме.
Есть вопрос к нам? Пожалуйста, укажите это в разделе комментариев «Angular Dropdown», и я вернусь к вам.