如何在下拉列表中添加标题(使用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
-八打灵再也
--shah alam
-巴生
-梳邦再也
--Setia alam
--sunway泻湖

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

日本(在此处添加标题)
-东京
--osaka
--kyoto
--shinsabashi
--shinagawa

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