Question

我已经用选择框创建了一个AngularJS应用程序，带有select的应用程序工作正常，但问题是我希望select中的选项组是可选的，因为我知道select中的选项组功能是不可选择，我使用CSS制作类似的东西，当我静态地将值放在工作正常，但动态我无法显示子细节

JSFIDDLE

任何人都可以告诉我一些解决方案吗

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

仅供参考，谷歌浏览器不允许将css添加到选项元素，请参阅此内容 answer

我发现这个有用：

example

如评论中所述，我使用原始变量上的循环以更简单的方式格式化数据：

$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的示例，看起来像下拉列表超出了您的问题的范围：

将select转为unordered-list fiddle

请参阅此question了解如何将ul转换为下拉列表

使用AngularJS无法在select中显示子详细信息

1 个答案: