使用<select>與角

Question

嵌套的對象，我想創建一個HTML輸出是這樣的：

<select> 
     <option value="" class="">-- Choose category --</option> 
     <optgroup label="Dogs"> 
      <option value="0">Great Dane</option> 
      <option value="1">Lab</option> 
     </optgroup> 
     <optgroup label="Cats"> 
      <option value="2">Black</option> 
      <option value="3">Tabby</option> 
     </optgroup> 
</select> 

從一個這樣的數組：

var animals = [{ 
    name: 'Dogs', 
    subcats: ['great dane', 'lab'] 
}, { 
    name: 'Cats', 
    subcats: ['tabby', 'black'] 
}, ]; 

而且具有綁定到該模型設置2個值，animal.type（狗或貓）和animal.subcategory。

嘗試了一堆東西......我想我需要使用ng-repeat並且通過...破解...任何幫助都非常明智。

Answer 1

由於您可以控制模型，因此文檔中有一個示例here。

變換你的模型看起來像：

var animals = [ 
    {name: "great dane", subcat: "Dogs"}, 
    {name: "lab",  subcat: "Dogs"}, 
    {name: "tabby",  subcat: "Cats"}, 
    {name: "black",  subcat: "Cats"} 
]; 
// and put it in the $scope 
$scope.animals = animals; 

和選擇會是什麼樣子：

<select ng-model="..." ng-options="a.name group by a.subcat for a in animals"> 

選擇將與name和subcat性質整個動物對象。