Search code examples
javascriptangularjsmultipleselection

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.

enter image description here

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

})
Solution

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