javascript - 如何通过从关联数组中选取项目来绑定(bind)基于第一个下拉选择的第二个下拉列表？

Question

我有如下所示的关联数组:

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

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

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

下拉列表 2: 根据项目选择显示选项。例如，如果用户选择了 Item1，那么在第二个下拉列表中我将显示 Egg,burger。

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

我只想根据项目选择从我的项目变量中获取它，但我不明白如何做到这一点。

现在 我已经注释掉了第二个下拉菜单的代码，因为我不知道如何从 ng-options 中的项目中选择选项。

这不可能通过从 1 个范围变量中选择项目来绑定(bind)第二个下拉列表吗？

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 作为输入绑定(bind)到第二个 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>