如何为ng-repeat指令中的多项选择添加动态选项？

给定一个包含一些options元素的HTML文档，任务是使用angularJS中的ng-repeat动态添加具有多个选择的javascript对象数组。

方法：该任务是使用ng-repeat遍历数组完成的。我们将此数组称为“模型” 。 DOM中存在的每个选择菜单都将根据其在数组中的特定索引进行建模。例如，^第二选择菜单将被建模为模型对象数组中的^{第二对象。}要向DOM添加更多选择菜单，我们只需要将一个空对象推入模型的数组即可，ng-repeat指令负责其余的复制。

示例1：在此示例中，我们将添加多个选择并显示所选数据。

  

    
    
    
      
    
        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];
            }
        });
    

  

    
        
            GeeksForGeeks
        
  
        
            
                
                
                
            
              
            
                
                
                
            
        CountryStateAction
                    
                    
                
                    
                    
                
                    Add Row
                
        Selections
        
            {{model.country}} - {{model.state}}
        
    

  

输出：所有数据已成功添加到对象数组。

示例2：在此示例中，我们预填充了models数组。

  

    
    
    
      
    
        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];
            }
        });
    

  

    
        
            GeeksForGeeks
        
  
        
            
                
                
                
            
              
            
                
                
                
            
        CountryStateAction
                    
                    
                
                    
                    
                
                    Add Row
                
        Selections
        
            {{model.country}} - {{model.state}}
        
    

  

输出：我们看到该页面现在始终包含国家(地区)“印度”，并在其页面加载时预先填充了“ UP”状态。