如何在下拉列表中添加标题(使用 ng-options Demo) [英] How to add a header in dropdown list (with ng-options Demo)

问题描述

我想从 JSON 文件在 AngularJS 中创建一个下拉列表.
如何在下拉列表中为类似列表项添加标题?
例如:

I want to create a dropdown list in AngularJS from a JSON file.
How do I add a header for similar list items in my dropdown?
For example:

马来西亚(在此处添加标题)
--sunway
--subang
--八打灵再也
--莎阿南
--巴生
--梳邦再也
--Setia alam
--双威泻湖

Malaysia (add the header here)
--sunway
--subang
--petaling jaya
--shah alam
--Klang
--Subang Jaya
--Setia alam
--sunway lagoon

日本(在此处添加标题)
--东京
--大阪
--京都
--新桥
--品川

Japan (add the header here)
--tokyo
--osaka
--kyoto
--shinsabashi
--shinagawa

推荐答案

我也有类似的需求.我就是这样做的:

I had a similar requirement. And this is how I did it :

分别创建两个列表来存储地点，一个用于马来西亚，另一个用于日本.在这种情况下，假设它是: vm.malaysia.list 和 vm.japan.list :

Create two lists each to store the places, one for Malaysia and the other for Japan. In this case, say it is : vm.malaysia.list and vm.japan.list :

<select 
ng-model="yourmodelName" >
 <option value="">Please select</option>
 <optgroup label="Malaysia">
  <option ng-repeat="place in vm.malaysia.list" ng-value="place">{{place}}</option>
 </optgroup>

 <optgroup label="Japan">
  <option ng-repeat="place in vm.japan.list" ng-value="place">{{place}} 
  </option>
 </optgroup>
</select>

请参阅:如何在选择中显示部分使用 anularjs 的下拉列表?

这篇关于如何在下拉列表中添加标题(使用 ng-options Demo)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！