<!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>The Above code is printing the two select boxes four times.The requirement is to not show any option in second select box before the user selects the first select box.I have achieved it by emptying the statistics array initially and populating it using on change function.
The problem is that when I select an option in first select box in row1 the respective 'select statistic' is getting populated which is fine but along with it the remaining 'select statistic' select boxes are also getting populated.I need it to be empty until i select the respective row select box.The explanation may be confusing please check the demo for better understanding. Thanks in Advance!Please help..
I have included the Demo