角度条件多选框 [英] Angular conditional multi selection box

问题描述

简介

我正在尝试开发2个选择(下拉)框，这些框将根据第一个选择填充第二个框.

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

例如

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

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.

问题与疑问

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

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

})

推荐答案

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

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>

这篇关于角度条件多选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！