选择第一个选择框后,需要填充第二个选择框

时间:2018-05-10 12:03:00

标签: angularjs ng-options angularjs-select



<!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>
&#13;
&#13;
&#13;

上面的代码是打印两个选择框四次。要求是在用户选择第一个选择框之前不在第二个选择框中显示任何选项。我已经通过最初清空统计数据并使用它填充它来实现它。关于改变功能。

问题在于,当我在第1行的第一个选择框中选择一个选项时,相应的选择统计信息&#39;正在填充,这是好的,但随之而来的剩余的选择统计数据&#39;选择框也会被填充。我需要它是空的,直到我选择相应的行选择框。解释可能会令人困惑请检查演示以便更好地理解。在此先感谢!请帮助..

我已加入Demo

0 个答案:

没有答案