How to Add Dynamic Options for Multiple Selects Inside ng-repeat Directive ? - GeeksforGeeks

13 Mar, 2020
Given an HTML document containing some options element and the task is to add an array of javascript objects dynamically with multiple selects using ng-repeat in angularJS.
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.
<!DOCTYPE html><html ng-app="gfg">  <head>    <meta charset="utf-8" />    <script data-require="angular.js@1.5.x"            src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"            data-semver="1.5.11">    </script>          <script>        var app = angular.module('gfg', []);          app.controller('MainCtrl', function($scope) {            $scope.models = [{}];            $scope.countries = ['India', 'Japan', 'US'];            $scope.states = {                India: ['UP', 'MP', 'Bihar'],                Japan: ['Tokyo', 'Yokohama'],                US: ['California', 'Texas'],            }            $scope.addRow = function() {                $scope.models.push({});            }            $scope.getState = function(country) {                return $scope.states[country];            }        });    </script></head>  <body ng-controller="MainCtrl">    <center>        <h1 style="color: green;">            GeeksForGeeks        </h1>          <table>            <tr>                <th>Country</th>                <th>State</th>                <th>Action</th>            </tr>                          <tr ng-repeat="model in models">                <td>                    <select ng-options=                    "country as country for country in countries"                            ng-model="model.country"                            ng-change='getState(model.country)'>                    </select>                </td>                <td>                    <select ng-options=            "state as state for state in getState(model.country)"                            ng-model="model.state">                    </select>                </td>                <td>                    <button ng-click="addRow()">Add Row</button>                </td>            </tr>        </table>        <h3 style="color:green">Selections</h3>        <p ng-repeat="model in models">            {{model.country}} - {{model.state}}        </p>    </center></body>  </html>
Output: All the data is successfully added to the objects array.
Example 2: In this example, we prepopulate the models array.
<!DOCTYPE html><html ng-app="gfg">  <head>    <meta charset="utf-8" />    <script data-require="angular.js@1.5.x"            src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"            data-semver="1.5.11">    </script>          <script>        var app = angular.module('gfg', []);                  // Prepopulate the models array here        app.controller('MainCtrl', function($scope) {            $scope.models = [{                country: 'India',                state: 'UP'            }];            $scope.countries = ['India', 'Japan', 'US'];            $scope.states = {                India: ['UP', 'MP', 'Bihar'],                Japan: ['Tokyo', 'Yokohama'],                US: ['California', 'Texas'],            }            $scope.addRow = function() {                $scope.models.push({});            }            $scope.getState = function(country) {                return $scope.states[country];            }        });    </script></head>  <body ng-controller="MainCtrl">    <center>        <h1 style="color: green;">            GeeksForGeeks        </h1>          <table>            <tr>                <th>Country</th>                <th>State</th>                <th>Action</th>            </tr>                          <tr ng-repeat="model in models">                <td>                    <select ng-options=            "country as country for country in countries"                        ng-model="model.country"                        ng-change='getState(model.country)'>                    </select>                </td>                <td>                    <select ng-options=         "state as state for state in getState(model.country)"                            ng-model="model.state">                    </select>                </td>                <td>                    <button ng-click="addRow()">Add Row</button>                </td>            </tr>        </table>        <h3 style="color:green">Selections</h3>        <p ng-repeat="model in models">            {{model.country}} - {{model.state}}        </p>    </center></body>  </html>
Output: We see that the page now always contain country “India” and state “UP” as its prepopulated on page load.
AngularJS-Misc
Picked
AngularJS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular File Upload
Top 10 Angular Libraries For Web Developers
Angular | keyup event
Auth Guards in Angular 9/10/11
What is AOT and JIT Compiler in Angular ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript