在第一个 select 框 select 编辑后，第二个 select 框需要填充

Question

<!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="num in loop">
 
        <select class="margins" ng-change=populate() class="custom-select"
                id="inputGroupSelect01" ng-model="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="logVal"
                ng-options="y.val for y in statistics">
            <option value="" disabled selected>Select Statistic</option>      
        </select>       

    </div>
 
 

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.loop = [1,2,3,4];
    $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"}
   
  ]  
  
 }];

$scope.statistics = []
$scope.populate = function() {
$scope.statistics = [
  
  {"val":"None"},{"val":"Mean"},{"val":"Median"},{"val":"Mode"},{"val":"Std Deviation"},{"val":"Variance"},
   {"val":"Mix "},{"val":"Max"}
   
 ]
    }
    
});
</script>
</body>
</html>

上面的代码打印了两个 select 框四个 times.The 要求是在用户 select 第一个 select 之前不在第二个 select 框中显示任何选项select box.I 通过最初清空统计数组并使用更改函数填充它来实现它。

问题是，当我 select 行 1 中第一个 select 框中的一个选项时，相应的 'select statistic' 正在填充，这很好，但随之而来的是剩余的 'select statistic' select boxes also getting populated.I need it to be empty until i select the respective row select box.The 解释可能令人困惑，请查看演示更好的理解。在此先感谢！请帮助..

我已经包含了 Demo

Answer 1

    <!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="num in loop">
     
         <select class="margins"  id="inputGroupSelect01"
                    ng-model="num.logType"
                    ng-options="x.type for x in logValues[0].parameters">
             <option value="" disabled selected>Select Log Values</option>
         </select>
      
         <select class="margins" ng-disabled="!num.logType"
                    ng-model="logVal"
                    ng-options="y.val for y in statistics">
             <option value=""  selected>Select Statistic</option>
         </select>       
     </div>
     
     

    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
       $scope.loop = [{"stat":1},{"stat":2},{"stat":3},{"stat":4}];
        $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"}
       
      ]  
      
     }];

    // $scope.statistics = []
    // $scope.populate = function() {
    $scope.statistics = [
      
      {"val":"None"},{"val":"Mean"},{"val":"Median"},{"val":"Mode"},{"val":"Std Deviation"},{"val":"Variance"},
       {"val":"Mix "},{"val":"Max"}
       
     ]
        //}

        
    });

    </script>
    </body>
    </html>

首先你必须循环对象而不是 $scope.loop 中的数字，以便为每个 select 模型生成不同的范围，每个 ng-model 一个值，然后你可以禁用第二个select 框取决于第一个 select 框的值。如果第一个 select 盒子模型未定义，我在这里禁用了第二个 select 盒子。一旦你选择一个日志值

，它将被启用

在第一个 select 框 select 编辑后，第二个 select 框需要填充

Second select box needs to be populated after the first select box is selected

angularjs

ng-options

angularjs-select