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

Question

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

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

Answer 1

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

1.

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

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

将您的 select 更改为

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

}

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

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

html

javascript

dom

parent-child

angularjs