Approach: The task is done using ng-repeat which loops through an array. Let’s call this array “models”. Each select menu present in the DOM is modeled to its specific index in the array. For example, the 2nd select menu would be modeled to the 2nd object in the model’s objects array. To add more select menus to the DOM, we only need to push an empty object to the model’s array, the ng-repeat directive takes care of the rest of reproduction.
Example 1: In this example, we will add multiple selects and display the selected data.
Output: All the data is successfully added to the objects array.
Example 2: In this example, we prepopulate the models array.
Output: We see that the page now always contain country “India” and state “UP” as its prepopulated on page load.
- AngularJS | ng-options Directive
- AngularJS | ng-model-options Directive
- Difference between multiple arguments and options object
- How to clear all options in a dropdown box?
- How to get N options from the <select> element using JQuery?
- HTTP headers | X-Frame-Options
- How to add options to a select element using jQuery?
- HTML | DOM Datalist options Collection
- HTTP headers | X-Content-Type-Options
- How to remove options from select element using jQuery ?
- How to add HTTP headers 'X-Frame-Options' on iframe ?
- How to specify a list of pre-defined options for input controls in HTML5?
- How to create a group of related options in a drop-down list using HTML ?
- v-else-if Directive in Vue.js
- Vue.js | v-else directive
- Vue.js | v-if directive
- v-for Directive in Vue.js
- AngularJS | ng-if Directive
- AngularJS | ng-app Directive
- AngularJS | ng-cut Directive
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.