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

我已经用select box创建了一个AngularJS应用程序，使用select的应用程序运行良好，但问题是我想要select中类似选项组的东西，它是可选择的，因为我知道select中的选项组功能是不可选择的，我使用CSS制作了类似的东西，当我静态地放置值时，它运行良好，但我不能动态地显示孩子的详细信息

谁能告诉我一些解决方法吗 角度模块（'Test1'，[]） .controller（'Foo'，函数（$scope）{ $scope.regionsData={ “区域”：[ { “区域ID”：15， “地区名称”：“喀拉拉邦”， “地点”：[ { “placeId”：21， “地名”：“Trivandrum” }, { “placeId”：22， “地名”：“Kollam” }] }, { “区域ID”：16， “地区名称”：“钦奈”， “地点”：[ { “placeId”：23， “地名”：“Kanchipuram” }, { “placeId”：24， “地名”：“Guindy” }] } ] } });

.region{
字体大小：粗体
}
.地点{
左侧填充：25px；
}

动态

如何显示子详细信息



静态

这就是我想要实现的

喀拉拉邦
特里凡德伦
奎隆
钦奈
坎奇普兰
库因地

仅供参考，google chrome不允许在选项元素中添加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，更好的方法是使用

和

进行下拉

下面是一个如何创建html的示例，使其看起来像一个下拉列表，这超出了您的问题范围：

将选择变成无序列表

---

关于如何将ul转换为下拉列表，请参见此内容，以便您希望

regionName

和

placeName

都填充到select中？是的，如静态所示。这看起来并不是一种有组织的方式。你确定你想这样做吗？是的，如果不是的话，有没有其他方法可以达到你可以做的事情。请注意，这里我使用了

optgroup

否则您必须更改JSON结构库以获得答案，但我需要选项元素中的类“region”-“place”您在chrome中是对的css不能应用于选项，你能告诉我一些其他的

和
• 的选择不会以下拉形式出现吗right@AlexMan有很多方法可以让ul看起来像一个下拉列表，甚至更好看。我更新了答案。请检查，如果回答了您的问题，请接受。