Open In App

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

Last Updated : 29 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
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.

html 
<!DOCTYPE html>
<html ng-app="gfg">

<head>
    <meta charset="utf-8" />
    <script data-require="[email protected]"
            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.

html 
<!DOCTYPE html>
<html ng-app="gfg">

<head>
    <meta charset="utf-8" />
    <script data-require="[email protected]"
            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.


T
thvardhan
Improve
Article Tags :

Explore

Lightbox