javascript - ng-绑定(bind)数据没有选择第二个选择

Question

简介

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

第二个选项未正确打印。

例如，我选择产品 1，然后选择格式 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>

我的 Controller 代码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);
        }

    })

Answer 1

您不能直接这样做，原因如下:PEN 。基本上，您不能将数据源作为目的地，因为您的数据只会被损坏。您可以做的是制作格式的浅拷贝，并用它来制作您需要的选项:WORKING PEN

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