How to create a Dropdown Box using Angular?
Learning and perfecting how to do certain everyday tasks using Angular can boost your career pretty fast, especially if you’re new in the web-development career. In this article, we will be discussing, about one such task that a developer must have done thousands of time: creating a humble dropdown box. The following topics will be covered in this blog:
What is Angular?
Well, if you’re reading a blog about how to make a dropdown box using Angular, it can be assumed that you already have a general idea of Angular. For those of you who don’t and have stumbled upon this blog due to the whims and fancies of the internet, Angular is a front-end development framework. It is developed and maintained by the tech giant, Google. It provides a modular way to develop single-page web applications like Gmail, PayPal, and Lego. Applications built using Angular implement the Model-View-View-Model approach.
What is a Dropdown Box?
A drop-down box is a clean method of showing an array of option since only one choice is displayed initially until the user activates the dropdown box. To add a dropdown-box to a web page, you would use a select element or a list-item. The first <option> tag in the select element needs to have the selected option set to the value of selected. Here’s a little code snippet to show you what I mean.
<select name="demo" id="#">
<option selected="selected" value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
</select>Of course, the above code would need its specific javascript to have expected behavior, but the basic skeleton of a dropdown menu remains the same. Let’s see how we do this in Angular now.
Dropdown Box Using Angular
Honestly speaking, it would be rather daunting to demonstrate all the possible ways to implement a dropdown-box in angular. Every developer’s brain handles the logic in its own unique way and I’ve seen some crazy dropdown menus in my career. I’m going to be humble and show you guys a rather basic dropdown-menu approach.
Method 1: Making a Dropdown List Using ng-options
You can use the ng-options directive to create a dropdown menu out of an array or list of items.
<div ng-app="demo" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('demo', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Demavand", "Pradeep", "Ashutosh"];
});
</script>Method 2: Making a Dropdown List Using ng-repeat
Angular being a versatile framework, obviously has multiple ways to create a basic dropdown menu. The ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, but the ng-options directive was made especially for filling a dropdown list with options and has one important advantage i.e dropdown menus made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.
This particular code snippet implements the same list using ng-repeat
<div ng-app="demo" ng-controller="myCtrl">
<select>
<option ng-repeat="name in names">{{name}}</option>
</select>
</div>
<script>
var app = angular.module('demo', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Demavand", "Pradeep", "Ashutosh"];
});
</script>This brings us to the end of this rather short blog “dropdown list using angular”. I hope now you have an idea of how you could implement a dropdown menu in your very own project. If you wish to check out more articles on the market’s most trending technologies like Artificial Intelligence, Python, Ethical Hacking, then you can refer to Edureka’s official site.
Do look out for other articles in this series which will explain the various other aspects of Web Development.
7. Animating AngularJS Apps with ngAnimate Directive
8. PHP Tutorial
10. NodeJS Tutorial
11. Top 10 JavaScript Frameworks
12. Build a CRUD Application Using Node.js and MySQL
13. Build CRUD Application using Node.JS and MongoDB
14. Build REST API with Node.js
15. Best 3 Ways to Make Node.js Requests
16. HTML vs HTML5
Originally published at https://www.edureka.co on September 5, 2019.
