Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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=
            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=
            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.



Last Updated : 13 Mar, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads