Question

请问我有问题。如何创建第二个下拉菜单取决于第一个下拉列表中的选择项目。

<div ng-app="myapp">
<fieldset ng-controller="FirstCtrl">
    <select 
        ng-options="p.id for p in jobs"
        ng-model="selectedPerson"></select>
    {{ selectedPerson }}
</fieldset>

Answer 1

您一次只能选择一个选择选项。另外，您可以在选择框中使用multiple

<div ng-app="myapp">
    <fieldset ng-controller="FirstCtrl">
        <select multiple
            ng-options="p.id for p in jobs"
            ng-model="selectedPerson" ng-change="addItems()"></select> 


        <select  
            ng-options="p.id for p in selectedPerson"
            ng-model="selecteditems" ng-change="addItems()"></select>
    </fieldset>
</div>

Demo

Answer 2

我有一个有趣的例子，向您展示选择列表如何依赖于另一个。实际上，列表的选择选项可以取决于第一个选择列表的值。

HTML

控制器

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
    $scope.jobs1 = [
    {
        "id": 600,
        "sector": "Controlling",
        "cost": 4700
    },
    {
        "id": 600,
        "sector": "finance",
        "cost": 4700

    },
    {
        "id": 40,
        "sector": "IT",
        "cost": 7600

    },
    {
        "id": 50,
        "sector": "Controlling",
        "cost": 4600

    },
    {
        "id": 50,
        "sector": "IT",
        "cost": 4600

    },{
        "id": 41,
        "sector": "Controlling",
        "cost": 1100

    },
    {
        "id": 41,
        "sector": "IT",
        "cost": 1100

    }
];
$scope.jobs2 = [];

$scope.firstSelectChange = function(){
  $scope.jobs2 = [];
  $scope.selectedPerson2 = '';
 for(var i=0; i<$scope.jobs1.length; i++){
       if($scope.jobs1[i].id === $scope.selectedPerson1.id){
           $scope.jobs2.push($scope.jobs1[i]);
       }
    }
}

});

您可以观察到，当您在第一个选择列表中选择一个选项时，第二个选择列表中的选项会动态更改。

有关更多实验和观察，请点击工作JSFIDDLE

的链接

Angularjs第二次下拉取决于第一次

2 个答案: