角度条件多选框

Question

简介

我正在尝试开发 2 个选择（下拉）框，根据第一个选择填充第二个框。

例如

选择产品 1，然后第二个框将具有格式 1、2 和 5。 选择产品 2，第二个可能有格式 2、3 和 6。

问题和疑问

第一个框已由我的数组填充，但第二个框未填充取决于选择而不是第一个框，实际上它根本没有填充（参见屏幕截图。

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>

controller.js

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

})

Answer 1

在您的第二个 select 框中使用此代码 ng-options="format.id as format.name for format in formData.ProductAndFormat.format" 而不是您的此代码 ng-options="format.id as format.name for format in user.productName.format">

---

var app = angular.module('anApp', []);
app.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.formData={};
    $scope.formData.ProductAndFormat =  $scope.productsandformats[0];
    $scope.displayModalValue = function () {
        console.log($scope.user.productName);
    }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

<div ng-app="anApp" ng-controller="dropDown">
<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-options="format.id as format.name for format in formData.ProductAndFormat.format">
        </select>
    </div>

</div>

</div>