Question

我正在使用下面的关联数组：

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

我有两个下拉列表如下：

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

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

但是我不想在第二个下拉列表中使用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，以便在不引入新范围变量的情况下执行此操作。

＆＃13;

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
    };
});

＆＃13;

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

＆＃13;

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>

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

2 个答案: