ng-binding数据没有获取第二个选择

时间:2017-05-31 13:50:19

标签: javascript html angularjs angular-ngmodel ng-options

简介

目前我有一个多选框,第二个选择是通过第一个选择填充的。

第二个选项未正确打印出来。

例如,我选择product 1,然后选择format 2我希望看到

{"ProductSelected":{"Pname":"product 1","format":[{"Fname":"format 2","id":"2"}

但该模型正在打印链接到产品的所有格式

{"ProductSelected":{"Pname":"product 1","format":[{"Fname":"format 1","id":"1"},{"Fname":"format 2","id":"2"}]},"format":"2"}

问题

为什么要打印链接到产品的所有格式?如何修复我的代码以仅打印所选格式?

我的选择框HTML

<div class="form-group">
    <div ng-controller="dropDown">
        <select ng-model="formData.ProductSelected"
                ng-options="product.Pname for product in productsandformats">
            <option value="">- Please Choose -</option>
        </select>

        <select ng-model="formData.format"
                ng-options="format.id as format.Fname for format in formData.ProductSelected.format"
                ng-if="formData.ProductSelected">
            <option value="">- Please Choose -</option>
        </select>
    </div>
</div>

我的控制器代码js

FirstModule.controller('dropDown', function ($scope) {

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

        $scope.user = {productName: $scope.productsandformats[0]};

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

    })

1 个答案:

答案 0 :(得分:0)

你不能直接这样做,原因是:PEN。基本上,您无法将数据源作为目标,因为您的数据将被破坏。您可以做的是制作格式的浅层副本,并使用它来制作您需要的选项:WORKING PEN

$scope.formats = {};
$scope.productsandformats.forEach(pf=>{
    $scope.formats[pf.Pname] = JSON.parse(JSON.stringify(pf.format));
})