AngularJS ng-repeat多行下拉框：实现每行二级下拉独立联动

这个问题的核心是所有行共享了同一个全局的statistics数组，所以只要任意一行触发populate方法，所有行的第二个下拉框都会被填充选项。要实现每行独立控制，我们需要让每一行的数据拥有自己独立的状态，而不是共用全局变量。

下面是修改后的完整代码：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style>
.margins{
  margin-right:8px;
  margin-bottom: 5px;
}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
  <div>
    <h2>LogValues</h2>
    <div class="logval" ng-repeat="item in loop">
      <select class="margins" ng-change="populate(item)" class="custom-select" id="inputGroupSelect01" ng-model="item.logType" ng-options="x.type for x in logValues[0].parameters">
        <option value="" disabled selected>Select Log Values</option>
      </select>
      <select class="margins" ng-model="item.logVal" ng-options="y.val for y in item.statistics">
        <option value="" disabled selected>Select Statistic</option>
      </select>
    </div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  // 把loop改成对象数组，每个对象维护自己的状态
  $scope.loop = [
    {logType: null, logVal: null, statistics: []},
    {logType: null, logVal: null, statistics: []},
    {logType: null, logVal: null, statistics: []},
    {logType: null, logVal: null, statistics: []}
  ];
  
  $scope.logValues = [
    {
      "name" : "Log Values",
      "parameters" : [
        {"type":"Depth Curve"},{"type":"Conductivity Attenuation -Corr- 400kHz BHI_LWD"},{"type":"Conductivity [CACLMED]"},{"type":"DeepResistivity[RACLMED]"},
        {"type":"DeltaTCompressionalBHI_LWD"},{"type":"Sonic Compressional [DTCED]"},{"type":"Gamma Ray - Apparent BHI_LWD"},{"type":"Gamma Ray [GRAMED]"},
        {"type":"Medium Resistivity [RPCLMED]"},{"type":"Resistivity Attenuation -Corr- 2MHz BHI_LWD"}
      ]
    }
  ];

  // 接收当前行的item作为参数，只填充该行的statistics
  $scope.populate = function(item) {
    item.statistics = [
      {"val":"None"},{"val":"Mean"},{"val":"Median"},{"val":"Mode"},{"val":"Std Deviation"},{"val":"Variance"},
      {"val":"Min"},{"val":"Max"}
    ];
    // 修复原代码里的"Mix"拼写错误，改成"Min"
  }
});
</script>
</body>
</html>

关键改动说明：

• 数据结构调整：将原来的loop数组从[1,2,3,4]改为包含4个对象的数组，每个对象自带logType（存储当前行第一个下拉框的选中值）、logVal（存储第二个下拉框的选中值）和statistics（当前行的统计选项数组，初始为空）。
• 方法参数化：populate方法现在接收当前行的item对象作为参数，只对该对象的statistics数组进行赋值，不会影响其他行。
• 模板绑定更新：模板里的ng-model和ng-options都绑定到当前循环项item的属性上，确保每行的状态完全独立。
• 顺便修复了原代码里的拼写错误：把"Mix "改成了正确的"Min"。

这样修改后，只有当某一行的第一个下拉框被选中时，该行的第二个下拉框才会加载选项，其他行的第二个下拉框依然保持无选项的状态，完美实现了你要的每行独立控制效果。

内容的提问来源于stack exchange，提问作者Avinash Bailore