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

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html ng-app="gfg">
  
<head>
    <meta charset="utf-8" />
    <script data-require="angular.js@1.5.x"
            src=
            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>

chevron_right


Output: All the data is successfully added to the objects array.

Example 2: In this example, we prepopulate the models array.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html ng-app="gfg">
  
<head>
    <meta charset="utf-8" />
    <script data-require="angular.js@1.5.x"
            src=
            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>

chevron_right


Output: We see that the page now always contain country “India” and state “UP” as its prepopulated on page load.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. 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.