Javascript 角度条件多重选择框

导言

我试图开发两个选择（下拉）框，根据第一个选择填充第二个框

比如说

选择产品1，第二个框的格式为1、2和5。 选择产品2，第二个可能有格式2、3和6

问题和疑问

第一个框已由my array填充，但第二个框未填充，这取决于所选内容而不是第一个框，事实上它根本没有填充（请参见屏幕截图）

HTML

<div class="form-group">

    <div ng-controller="dropDown">
        <select ng-model="formData.ProductAndFormat" ng-options="product.name for product in productsandformats">
        </select>

        <select ng-model="formData.format" ng-if="user.productName"
                ng-options="format.id as format.name for Format in user.productName.format">
        </select>
    </div>

</div>

在第二个

选择
框中，使用此代码
ng options=“format.id as format.name作为formData.ProductAndFormat.format”中的格式，而不是使用此代码
ng options=“format.id as format.name作为user.productName.format”中的格式



var-app=angular.module（'anApp'，[]）；
应用程序控制器（'下拉列表'，函数（$scope）{
$scope.productsandformats=[{
“名称”：“产品1”，
“格式”：[{
“名称”：“格式1”，
“id”：“1”
}, {
“名称”：“格式2”，
“id”：“2”
}]
}, {
“名称”：“产品2”，
“格式”：[{
“名称”：“格式3”，
“id”：“3”
},{
“名称”：“格式2”，
“id”：“2”
},
{
“名称”：“格式4”，
“id”：“4”
}, {
“名称”：“格式5”，
“id”：“5”
}]
}];
$scope.formData={}；
$scope.formData.ProductAndFormat=$scope.productsandformats[0]；
$scope.displayModalValue=函数（）{
console.log（$scope.user.productName）；
}
})


在第二个
选择
框中，使用此代码
ng options=“format.id as format.name作为formData.ProductAndFormat.format”中的格式，而不是使用此代码
ng options=“format.id as format.name作为user.productName.format”中的格式



var-app=angular.module（'anApp'，[]）；
应用程序控制器（'下拉列表'，函数（$scope）{
$scope.productsandformats=[{
“名称”：“产品1”，
“格式”：[{
“名称”：“格式1”，
“id”：“1”
}, {
“名称”：“格式2”，
“id”：“2”
}]
}, {
“名称”：“产品2”，
“格式”：[{
“名称”：“格式3”，
“id”：“3”
},{
“名称”：“格式2”，
“id”：“2”
},
{
“名称”：“格式4”，
“id”：“4”
}, {
“名称”：“格式5”，
“id”：“5”
}]
}];
$scope.formData={}；
$scope.formData.ProductAndFormat=$scope.productsandformats[0]；
$scope.displayModalValue=函数（）{
console.log（$scope.user.productName）；
}
})

我已经为第一个选择框设置了默认值：）+1@RameshRajendran，感谢buddy的编辑和向上投票：）我已为第一个选择框设置了默认值：）+1@RameshRajendran，感谢buddy的编辑和更新投票：）
 .controller('dropDown', function ($scope) {

    $scope.productsandformats = [{
        "name": "product 1",
        "format": [{
            "name": "format 1",
            "id": "1"
        }, {
            "name": "format 2",
            "id": "2"
        }]
    }, {
        "name": "product 2",
        "format": [{
            "name": "format 3",
            "id": "3"
        },{
            "name": "format 2",
            "id": "2"
        },
            {
            "name": "format 4",
            "id": "4"
        }, {
            "name": "format 5",
            "id": "5"
        }]
    }];

    $scope.user = {productName: $scope.productsandformats[0], format: '1'};

    $scope.displayModalValue = function () {
        console.log($scope.user.productName);
    }

})