通过选择其他下拉列表的选项，将列表填充到下拉列表中，但完整的列会在表格中获取该行的选项答案

【问题标题】：List is populated into a dropdown, by selecting an option of other dropdown, but the complete column gets that row's options in a table通过选择其他下拉列表的选项，将列表填充到下拉列表中，但完整的列会在表格中获取该行的选项
【发布时间】：2021-05-17 04:33:28
【问题描述】：

从表行的下拉列表中选择一个选项后，我调用 api 将字符串列表放入该行的下拉字段中，但完整的列会获取该行的选项。我只希望对特定的行进行操作。如何在 Angular js 中实现这一点。例如：如果我选择 India 作为员工的 countryName，我会从 api 获取 CountryStates，但 CountryStates 会填充到该表的完整列中。所以我希望它填充到那个特定的行。你能帮我么。这是我的代码

<tr ng-repeat = "data in arrayOfEmp" id = {{$index}}>
<td>
<select ng-model="data.countryName" ng-options="country for country in countries" ng-change ='getStates($index)' unselectable="on">
{{data.countryName}}
</select>
</td>
<td>
<select ng-model="data.stateName" ng-options="st for st in stateNames" ng-change ='changeButtonStatus()' unselectable="on">
{{data.stateName}}
</select>
</td>

这里是angularjs控制器的代码

$scope.arrayOfEmp = [{
    empID : '093024',
    countryName : 'India',
},{
    empID : '093214',
    countryName : 'USA',
},{

    empID : '0935614',
    countryName : 'Dubai',
}];
    
    
    
    $scope.getStates = function(id)
    {   $scope.stateNames = [];
        http({
        method:'GET'
        url:'getStateNames'
        params: {country : $scope.arrayOfEmp[id].countryName}
      }).then(function onSuccess(response){
               $scope.stateNames = response.data;
         },function onError(){
                  console.log(response.data);
               });
        
    }
[![enter image description here][1]][1]

【问题讨论】：

标签： javascript html angularjs dom parent-child

【解决方案1】：

您对所有行使用相同的 stateNames，因此当您使用 API 调用的结果更新 stateNames 的值时，所有值都会更新。您可以做的是将 stateNames 添加到您的 arrayOfEmp 并使用该值。

$scope.arrayOfEmp = [{
    empID : '093024',
    countryName : 'India',
    stateNames : []
},{
    empID : '093214',
    countryName : 'USA',
    stateNames : []
},{

    empID : '0935614',
    countryName : 'Dubai',
    stateNames : []
}];

将您的选择更改为

<select ng-model="data.stateName" ng-options="st for st in data.stateNames" ng-change ='changeButtonStatus()' unselectable="on">
 {{data.stateName}}
 </select>

将行传递给 ng-change

 <select ng-model="data.countryName" ng-options="country for country in countries" ng-change ='getStates($index,data)' unselectable="on">
 {{data.countryName}}

更新行中的 stateNames 数组

 $scope.getStates = function(id,data)
  {   $scope.stateNames = [];
 http({
 method:'GET'
 url:'getStateNames'
 params: {country : $scope.arrayOfEmp[id].countryName}
 }).then(function onSuccess(response){
        data.stateNames = response.data;
  },function onError(){
           console.log(response.data);
        });

}

【讨论】：