javascript - 通过选择其他下拉列表的选项,将列表填充到下拉列表中,但完整的列会在表格中获取该行的选项
问题描述
从表行的下拉列表中选择一个选项后,我调用一个 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]
解决方案
您对所有行使用相同的 stateNames,因此当您使用 API 调用的结果更新 stateNames 的值时,所有值都会更新。您可以做的是将 stateNames 添加到您的 arrayOfEmp 并使用该值。
1.
$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); }); }
推荐阅读
- java - Tomcat数据库连接池高吞吐速度慢
- html - 你怎么称呼这些滚动效果,我如何在 Wordpress 中做到这一点?
- checkbox - 如何使用 Bootstrap 在表格中居中自定义复选框
- python - 使用脚本获取 pymysql 的回溯
- node.js - 我只是想用简单的方式连接react和socket io,但是连接不上
- html - @media(最大宽度或最小宽度)用于视频
- python - 使用 WSGI 在烧瓶中找不到 MYSQL
- jquery - 编写时JQuery DatePicker在日期/月份/年份之间跳转
- javascript - 在数据表中创建删除确认 SweetAlert
- swiftui - 如何将文本字段值分配给环境对象 - 错误无法将“字符串”类型的值转换为预期的参数类型“绑定”
"