NG結合數據未拿起第二個選擇

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