Question

我有一个下拉列表，在此下拉菜单中，我有两个字段Randomslab和standard style。

当我选择Randomslab时，我在下一个dropdown(300*300)中只需要一个值。

当我选择standard style时，我需要下一个dropdown(300x300,300x600,600x600)中的所有值。

但是目前我获得了这两个领域的所有价值，我需要第一个值的第一个值和下一个下拉列表中的其他值。我怎样才能做到这一点？

＆＃13;

<!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>

＆＃13;

Answer 1

您可以稍微修改您的模型数据，以便相应地填充第二个下拉列表。

您可能需要在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>

下拉值映射到anthore下拉的angularjs

1 个答案: