如何在 ng-repeat 中为多个选择填充动态选项

Question

我通过单击 Html 表单中的 "add Row" 按钮来添加动态行。在一行中，我有 'Country' select 和 'State' select。每当我 select 国家/地区时，州会在第一行和第二行中正确填充，如果我更改国家/地区，则所有其他行值也会更改。请帮忙。在下面的代码中，"data.states" 数组，我从数据库加载。但问题出在多行之间，states 数组被覆盖 每个国家/地区的变化。

 <table>
       <tr>
         <th>Country</th>
         <th>State</state>
         <th>Action</th>
       </tr>
       <tr ng-repeat="model in models track by $index">
          <td>
               <select ng-options="country in countries" ng-model="country" ng-change='getState(country)'>
               </select>
          </td>
          <td>
              <select ng-options="state in data.states">
              </select>
          </td>
          <td><button ng-click="addRow()">Add Row</button></td>
       </tr>
    </table>

$scope.models = [{}];

$scope.addRow = function(){
  $scope.models.push({});
}

Answer 1

这是因为您对所有 selects

使用相同的 ng-model

ng-model="country"

如果你想select在每一行中独立的国家你可以尝试以下

<tr ng-repeat="model in models track by $index">
    <td>
        <select ng-options="country in countries" ng-model="model.country" ng-change='getState(model.country)'>
        </select>
    </td>
    <td>
        <select ng-model="model.state " ng-options="state in data.states">
        </select>
    </td>
    <td><button ng-click="addRow()">Add Row</button></td>
</tr>

Answer 2

问题是您的所有代码都对国家/地区使用相同的 ng-model 引用，而且您没有在范围内使用不同的变量来在此处为每个国家/地区存储您的州：<select ng-options="state in data.states"></select>

试试下面的代码

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


  $scope.models = [{}];

  $scope.countries = ['Brazil', 'Canada', 'US'];

  $scope.states = {
    Brazil: ['Rio de Janeiro', 'Acre', 'Bahia'],
    Canada: ['Ontario', 'Alberta', 'Manitoba'],
    US: ['California', 'Florida', 'Texas'],
  }

  $scope.addRow = function(){
    $scope.models.push({});
  }

  $scope.getState = function(country){
    // implement your fetch state logic here
    return $scope.states[country];
  }

这是一个有效的 plunker：https://plnkr.co/edit/coh5niQXon10l5RHYKza?p=info

如何在 ng-repeat 中为多个选择填充动态选项

How to populate dynamic options for multiple Selects inside a ng-repeat

javascript

html

angularjs

servicenow