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

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

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

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

下拉菜单1：显示项目1和项目2，即项目列表中的标题

下拉菜单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>

最佳答案

您可以将第一个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>

关于javascript - 如何通过从关联数组中选择项目来基于第一下拉选择绑定(bind)第二下拉？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45932733/