Angular conditional multi selection box

问题

Introduction

I am trying to develop 2 selection (drop-down) boxes that populates the second box depending on the first selection.

for example

Choose product 1 and the second box will then have format 1, 2 and 5. choose product 2 and the second may have format 2, 3 and 6.

Problem and Question

The first box has been populated by my array, but the second box is not populating depending on the selection not the first, in fact its not populating at all (see screen shot.

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

})

回答1:

Use this code ng-options="format.id as format.name for format in formData.ProductAndFormat.format" instead of your this code ng-options="format.id as format.name for format in user.productName.format"> on your second select box

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>

来源：https://stackoverflow.com/questions/44266101/angular-conditional-multi-selection-box

标签

javascript

angularjs

multipleselection