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

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

提问人：Ruchaa Nandgirikar 提问时间：2/14/2021 最后编辑：Ruchaa Nandgirikar 更新时间：2/14/2021 访问量：42

问：

enter image description here从表行的下拉列表中选择一个选项后，我调用一个 api 将 String 列表获取到该行的下拉字段中，但完整的列获取该行的选项。我只想让那一行纵。如何在 angular js 中实现这一点。 例如： 如果我选择印度作为员工的 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 父子

评论

答：

0赞 NTP 2/14/2021 #1

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

1.

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

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

  1. 将您的选择更改为

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

  2. 将行传递给 ng-change

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

  3. 更新行中的 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);
        });

}

上一个：限制 AngularJS ng 样式

下一个：带数组的 angular 和 changling dom 树