如何通过从关联数组中选择项目来基于第一下拉选择绑定第二下拉？

Question

我有如下类似的关联数组：

$scope.item=
    {
        "Item1": [
          {
            "title": "Item1",
            "choices": [
              "Egg",
              "burger",
            ]
          }
        ],
        "Item2": [
          {
            "title": "Item2",
            "choices": [
              "Pizza",
              "Rice",
            ]
          }
        ]
     }
 });

我有2个下拉菜单，如下所示：

下拉菜单1：显示Item1和Item2，即两个项目列表中的标题

下拉菜单2：根据项目选择显示选择。 例如，如果用户选择了Item1，则在第二个下拉菜单中，我将显示Egg，burger。

但是我不想在我的第二个下拉列表中使用1个额外的范围变量来绑定此选择。

我只想根据项目选择从我的项目变量中获取它，但我不知道如何执行此操作。

现在， 我已注释掉第二个下拉列表的代码，因为我没有得到如何从ng-options中的项目中选择选项。

通过从1个范围变量中选择项目，是否不可能绑定第二个下拉列表？

 var app = angular.module("myApp", []); app.controller("MyController", function($scope) { $scope.item = { "Item1": [{ "title": "Item1", "choices": ["Egg", "burger", ] }], "Item2": [{ "title": "Item2", "choices": ["Pizza", "Rice", ] }] }; $scope.myItem = { title: null, choice: null }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <ul ng-app="myApp" ng-controller="MyController"> <select ng-model="myItem.title" ng-options="value[0].title as key for (key , value) in item"> <option value="">Select Items</option> </select> <!--<select ng-model="myItem.choice" ng-options="value[0] as key for (key , value) in item" > <option value="">Select choice</option> </select>-->{{myItem.title}} </ul> 

Answer 1

您可以将第一个ng-model作为输入绑定到第二个ng-options ，而无需引入新的作用域变量。

 var app = angular.module("myApp", []); app.controller("MyController", function($scope) { $scope.item = { "Item1": [{ "title": "Item1", "choices": ["Egg", "burger", ] }], "Item2": [{ "title": "Item2", "choices": ["Pizza", "Rice", ] }] }; $scope.myItem = { title: null, choice: null }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <ul ng-app="myApp" ng-controller="MyController"> <select ng-model="myItem.title" ng-options="key as key for (key , value) in item"> <option value="">Select Items</option> </select> <select ng-model="myItem.choice" ng-options="value as value for value in item[myItem.title][0].choices"> <option value="">Select choice</option> </select> {{myItem.title}}{{myItem.choice}} </ul> 

Answer 2

  
 
  
  
 
   
 
    
    var app = angular.module("myApp", []);
    app.controller("MyController", function($scope) {
        $scope.item = {
            "Item1": [{
                "title": "Item1",
                "choices": ["Egg", "burger", ]
            }],
            "Item2": [{
                "title": "Item2",
                "choices": ["Pizza", "Rice", ]
            }]
        };
 $scope.myFunc = function() {
$scope.myItem.choices=$scope.item[$scope.myItem.title][0].choices;
    };
        $scope.myItem = {
            title: null,
            choices: null
        };
    });
 
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <ul ng-app="myApp" ng-controller="MyController">
        <select ng-model="myItem.title" ng-change="myFunc()" ng-options="value[0].title as key for (key , value) in item">
            <option value="">Select Items</option>
        </select>
        <select ng-model="myItem.choice" ng-options="x for x in myItem.choices" >
               <option value="">Select choice</option>
         </select>{{myItem.choices}} </ul>