角有条件的多选择框

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>