Angular JS - 如何在下拉列表中添加標題

Question

我想從JSON文件中創建Angular中的下拉列表。
如何在我的下拉列表中添加類似列表項的標題？
例如：

馬來西亞（在此處添加的報頭）
--sunway
--subang
--petaling再也
--shah Alam的
--Klang
--Subang再也
--Setia阿拉姆
--sunway瀉湖

日本（在這裏添加頁眉）
--tokyo
--osaka
--kyoto
--shinsabashi
--shinagawa

Answer 1

我給喜歡

<div class="container"> 
<h2>Dropdowns</h2> 
<p>The .dropdown-header class is used to add headers inside the dropdown menu:</p> 
<div class="dropdown"> 
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials 
<span class="caret"></span></button> 
<ul class="dropdown-menu"> 
    <li class="dropdown-header">{{xx-Dropdown header 1-xx}}</li> 
    <li><a href="#">{{xx}}</a></li> 
    <li class="divider"></li> 
    <li class="dropdown-header">{{xx-Dropdown header 2-xx}}</li> 
    <li><a href="#">{{yy}}</a></li> 
</ul> 
</div> 
</div> 

示例代碼和我附上鍊接閱讀關於Dropdown的http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

此處還有Dropdown Header link的實時運行代碼

Answer 2

意味着你的JSON看起來像這樣

$scope.dropdown = [ 
    { 
     name:'Malaysia', 
     items: [ 
      {name: 'sunway', value: 1}, 
      {name: 'subang', value: 2}, 
      {name: 'petaling jaya', value: 3} 
     ] 
    }, 
    { 
     name:'Japan', 
     items: [ 
      {name: 'tokyo', value: 4}, 
      {name: 'osaka', value: 5}, 
      {name: 'kyoto', value: 6} 
     ] 
    } 
] 

這應該工作：

<select> 
    <optgroup ng-repeat="header in dropdown" label="{{ header.name }}"> 
     <option ng-repeat="item in header.items" value="{{ item.value }}">{{ item.name }}</option> 
    </optgroup> 
</select> 

編輯

演示：http://jsfiddle.net/jkrielaars/5wg9ejzg/