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

2021年4月8日16:35:31 发表评论 944 次浏览

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

方法:该任务是使用ng-repeat遍历数组完成的。我们称这个数组"楷模"。 DOM中存在的每个选择菜单都将根据其在数组中的特定索引进行建模。例如2nd选择菜单将模仿2nd模型的对象数组中的对象。要向DOM添加更多选择菜单, 我们只需要将一个空对象推入模型的数组即可, ng-repeat指令负责其余的复制。下面我们逐渐为ng-repeat指令中的多项选择添加动态选项。

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

<!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;">
             lsbin
         </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>

输出如下:

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

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

示例2:在此示例中, 我们预填充了模型数组。

<!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;">
             lsbin
         </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>

输出如下:

我们看到页面现在总是包含国家"India", 并在页面加载时预先填充国家" UP"。

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

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: