角有條件的多選擇框

Question

介紹

我想開發2選擇（下拉）用於填充根據第一選擇第二個框盒。

例如

選擇產品1和第二框，然後將具有格式1，2和5 選擇產品2和第二可具有格式2，3和6

問題和問題

第一個盒子已經被我的數組填充，但第二個盒子沒有填充，這取決於選擇而不是第一個盒子，實際上它根本沒有填充（請參閱屏幕截圖

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

}) 

Answer 1

使用此代碼ng-options="format.id as format.name for format in formData.ProductAndFormat.format"，而不是在你的第二個你的這個代碼箱

---

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>