AngularJS Select: Dynamic Dropdowns Made Easy - FadiZahhar/AngularJs GitHub Wiki

The StartApp Team Streamlines Form Choices

Scene: The Feature Request

The client emails the StartApp team:

“Please add a dropdown menu for users to select their country, and another for their user role. We’ll need to update these lists as our business grows, so keep it flexible!”

Lina (Designer): “Static dropdowns are tedious. I want a way to update options without rewriting the HTML every time.”

Sara (Junior Dev): “With AngularJS, we can bind dropdown options to data arrays using ng-options. That’ll make our form super flexible!”

1. Simple Select with ng-model

Start with a basic country dropdown:

<div ng-app="formApp" ng-controller="formCtrl">
  <p>Choose a country:</p>
  <select ng-model="country">
    <option value="Lebanon">Lebanon</option>
    <option value="UAE">UAE</option>
    <option value="USA">USA</option>
  </select>
  <p>You selected: {{ country }}</p>
</div>
<script>
  angular.module('formApp', []).controller('formCtrl', function($scope) {});
</script>
  • The ng-model="country" binds the selected option to the country variable on $scope.

2. Dynamic Dropdown with ng-options

Sara: “Let’s pull options from a data array, so we never have to touch the HTML when options change.”

Controller:

$scope.countries = [
  { code: 'LB', name: 'Lebanon' },
  { code: 'AE', name: 'UAE' },
  { code: 'US', name: 'USA' }
];

HTML:

<select ng-model="country" ng-options="c.name for c in countries">
</select>
<p>You selected: {{ country.name }} ({{ country.code }})</p>
  • Now the dropdown options are built from the countries array.
  • The full object is stored in country, so you can display the code or any other property.

3. Add a Default Option

Add a prompt so the dropdown starts with “Select a country…”:

<select ng-model="country" ng-options="c.name for c in countries">
  <option value="">Select a country...</option>
</select>
<p ng-if="country">You selected: {{ country.name }} ({{ country.code }})</p>

4. Multiple Dropdowns: Adding a Role Selector

Controller:

$scope.roles = ["Admin", "User", "Manager"];

HTML:

<p>Select a role:</p>
<select ng-model="role" ng-options="r for r in roles">
  <option value="">Select a role...</option>
</select>
<p ng-if="role">You selected role: {{ role }}</p>

5. Full Registration Example

Combine both selects on one form:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="formApp" ng-controller="formCtrl">
  <h3>Register</h3>
  <p>Country:</p>
  <select ng-model="country" ng-options="c.name for c in countries">
    <option value="">Select a country...</option>
  </select>
  <p ng-if="country">Selected country: {{ country.name }} ({{ country.code }})</p>
  <p>Role:</p>
  <select ng-model="role" ng-options="r for r in roles">
    <option value="">Select a role...</option>
  </select>
  <p ng-if="role">Selected role: {{ role }}</p>
</div>
<script>
angular.module('formApp', []).controller('formCtrl', function($scope) {
  $scope.countries = [
    { code: 'LB', name: 'Lebanon' },
    { code: 'AE', name: 'UAE' },
    { code: 'US', name: 'USA' }
  ];
  $scope.roles = ["Admin", "User", "Manager"];
});
</script>
</body>
</html>

6. Team Reflection: Why Use AngularJS Dropdowns?

  • Sara: “Updating dropdowns is as simple as changing a list in the controller.”
  • Lina: “We can localize, add, or remove options anytime—no more messy HTML edits!”
  • Mike (Team Lead): “Forms are more maintainable, and we can easily add validation later.”

Quick Challenge: Dependent Dropdowns

Show a city dropdown that updates when the user picks a country (use ng-change).

Hint: In your controller, update the cities array whenever country changes.

Key Takeaways

  • ng-model and ng-options make select elements dynamic and maintainable.
  • The selected value can be an object, making complex forms easy to build.
  • AngularJS forms are simple to update and future-proof!

Team Conclusion

Lina: “Now our forms are flexible and easy to use. Let’s try radio buttons or validation next!”

Sara: “I love how everything updates in real time!”

Try these examples live in the [W3Schools AngularJS TryIt Editor](https://www.w3schools.com/angular/angular_tryit.asp?filename=tryangular_select).

⚠️ **GitHub.com Fallback** ⚠️