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

Question

简介

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

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

例如我选择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);
        }

    })

Answer 1

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

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