子項詳細信息無法使用AngularJS在select中顯示

Question

我創建了一個帶有選擇框的AngularJS應用程序，帶有select的應用程序運行良好，但問題是我希望選項組像select中的東西是可以選擇的，因為我知道select中的選項組功能是不可選的，當我將值靜態地正常工作時，我使用CSS進行了類似的工作，但動態地我無法顯示子項的詳細信息

的jsfiddle

誰能告訴我一些解決方案

 angular.module('Test1',[]) .controller('Foo', function($scope) { $scope.regionsData = { "regions": [ { "regionId": 15, "regionName": "Kerala", "places": [ { "placeId": 21, "placeName": "Trivandrum" }, { "placeId": 22, "placeName": "Kollam" }] }, { "regionId": 16, "regionName": "Chennai", "places": [ { "placeId": 23, "placeName": "Kanchipuram" }, { "placeId": 24, "placeName": "Guindy" }] } ] } }); 

 .region { font-weight: bold } .place { padding-left: 25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="Test1"> <div ng-controller="Foo"> <b>DYNAMIC<b><br> HOW CAN I DISPLAY THE CHILD DETAILS<br> <select ng-model="data.selectedDocumentType" class="region" ng-options="region as region.regionName for region in regionsData.regions"> </select> <br><br><b>STATIC<b><br> THIS IS WHAT I WANT TO ACHIEVE<br> <select> <option class="region">Kerala</option> <option class="place">Trivandrum</option> <option class="place">Kollam</option> <option class="region">Chennai</option> <option class="place">Kanchipuram</option> <option class="place">Guindy</option> </select> </div> </div> 

Answer 1

僅供參考，谷歌瀏覽器不允許在選項元素中添加CSS，請參見此答案

我發現這可行：

例

如評論中所述，我使用原始變量上的循環以更簡單的方式重新格式化了數據：

$scope.test = [];
$scope.regionsData.regions.forEach(function(val, key) {
  $scope.test.push(val.regionName);
  val.places.forEach(function(val, key){
    $scope.test.push(val.placeName);
  })
})

並在html中：

<select ng-model="data.selectedDocumentType" class="region" ng-options="region for region in test"> </select>

為了克服chrome的問題並應用CSS，更好的方法是將<ul>與<li>以進行下拉。

這是一個如何創建html的示例，使下拉菜單看起來超出了您的問題范圍：

將選擇變成無序小提琴

看到這個問題上如何把UL成一個下拉