下降值映射到anthore下降在angularjs

我有一個下拉列表，並在此下拉列表中我有兩個字段Randomslab和standard style。下降值映射到anthore下降在angularjs

當我選擇Randomslab時，我只需要在下一個dropdown(300*300)一個值。

當我選擇standard style然後我需要在下一個dropdown(300x300,300x600,600x600)所有的價值。

但是，目前我正在爲這兩個字段獲取所有值，我需要第一個值爲第一個字段，所有其他下一個下拉列表中的值。我怎樣才能做到這一點？

<!DOCTYPE html> 
 
<html> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 
<p>Select a size:</p> 
 
<select ng-model="selectedtype" ng-options="x for (x, y) in type"> 
 
    </select> 
 
<select ng-model="selectedsize" ng-options="x for (x, y) in size"> 
 
</select> 
 

 

 
<h2>length: {{selectedsize.length}}</h2> 
 
<h2>bredth: {{selectedsize.bredth}}</h2> 
 

 

 
</div> 
 

 
<script> 
 
var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.size = { 
 
         "300x300" : {length : "300",bredth : "300"}, 
 
         "300x600" : {length: "300", bredth : "600"}, 
 
         "600x600" : {length : "600", bredth : "600"} 
 
        } 
 
     $scope.type = { 
 
         "Randomslab":{}, 
 
         "standard tyle":{} 
 
        }   
 
        
 
}); 
 
</script> 
 

 
</body> 
 
</html>

來源

2016-01-30 bhatt

可以稍微modifiy模型數據，以便相應地填充第二個下拉。

您可能需要在selectedtype更改上添加一些變通，以便爲選定的大小選擇默認值並避免這個令人討厭的空白字段。

<!DOCTYPE html> 
 
<html> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 
<p>Select a size:</p> 
 
<select ng-model="selectedtype" ng-options="x for (x, y) in type"> 
 
    </select> 
 
<select ng-model="selectedsize" ng-options="x for (x, y) in selectedtype"> 
 
</select> 
 

 

 
<h2>length: {{selectedsize.length}}</h2> 
 
<h2>bredth: {{selectedsize.bredth}}</h2> 
 

 

 
</div> 
 

 
<script> 
 
var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.type = { 
 
     "Randomslab":{ 
 
      "300x300" : {length : "300",bredth : "300"} 
 
     }, 
 
     "standard tyle":{ 
 
      "300x300" : {length : "300",bredth : "300"}, 
 
      "300x600" : {length: "300", bredth : "600"}, 
 
      "600x600" : {length : "600", bredth : "600"} 
 
     } 
 
    };   
 
        
 
}); 
 
</script> 
 

 
</body> 
 
</html>

來源

2016-01-30 12:06:13 nubinub

下降值映射到anthore下降在angularjs

回答

相關問題