2014-02-13 24 views
0

我是AngularJS的新手,我無法弄清楚如何生成我的<option> listdata-ng-repeat和<option>標記

我期望的輸出是這樣的小提琴http://jsfiddle.net/XdpJv/

我當前的代碼看起來像這樣

<select data-ng-model="rateFilter" data-ng-change="filterStuff()"> 
    <option selected="selected" value="">Show lowest rating</option> 
    <option value="{{rate}}" data-ng-repeat="rate in ratings">{{rate}}</option> 
    <option value="{{rate}}+" data-ng-repeat="rate in ratings">{{rate}}+</option> 
</select> 

評級變量看起來像這樣[1 2 3]並且不能更改。我如何在不更改評分變量的情況下實現這一目標?

+0

我認爲如果將組合的操縱列表放在一個不同的數組中並將其用於ng-repeat,它會更好。這對你有可能嗎?您的評級仍然完好:) – Kop4lyf

+0

@ Kop4Lyf這會工作,但我必須保持我的記憶使用盡可能低,所以它不是最佳的。 – daker

+0

它不會影響太多的記憶。另外,我無法找到一種方法來按照其他方式演奏。只能列出選項爲1,2,3,4,1+,2 + ...讓我知道你是否能夠做到這一點。 – Kop4lyf

回答

0

您應該使用ngOptions指令來管理您的Select-Option。有時候這有點棘手,但你應該總是試圖以角度來看待它。你可以看看here它是如何工作的。重要的是這一部分:

for array data sources: 
    label for value in array 
    select as label for value in array 
    label group by group for value in array 
    select as label group by group for value in array track by trackexpr 
for object data sources: 
    label for (key , value) in object 
    select as label for (key , value) in object 
    label group by group for (key, value) in object 
    select as label group by group for (key, value) in object 

你必須定義數組或與您可能評分對象,然後你的代碼可以是這樣的:

<select ng-model="ratings" ng-options="label for value in possible_ratings"> 
</select> 
+0

'label'不會被定義,ng-model會覆蓋他的選項列表。在數字數組中,唯一可用的標籤是'value',除非您使用的是指令範圍之外的常量標籤。他還希望繼續將他選擇的選項的'value'存儲在他的選項數組之外的某個位置,所以'ng-model'應該保持設置爲'rateFilter'。 – citizenslave

0

你竟然想用一個ng-options屬性上你的select標籤。 Angular利用所謂的「指令」劫持所有select標記,並使用ng-options屬性中的表達式爲select生成option標記。你的表情會是這樣的:

<select data-ng-model="rateFilter" data-ng-change="filterStuff()" 
     data-ng-options="rate for rate in ratings"></select> 

表達的for之前成爲該選項的標籤,for後的變量是每個對象的引用,顯然變量後in是你的陣列。如果要定義自定義value爲你的選擇,你可以表達改變

rate as rate+'%' for rate in ratings` 

假設收視率的百分比。如果你的數組實際上包含的對象,如bracket場你甚至可以羣,可以在docs發現有關select指令

rate.percent as rate.percent+'%' group by rate.bracket for rate in ratings 

更多信息和ng-options屬性的選項。

你看引擎蓋下的本質是什麼

for (i in ratings) { 
    rate = ratings[i]; 
    // insert <option value="{{rate.percent}}">{{rate.percent}}%</option> 
} 

隨着group by破收視率成的基礎上rate.bracket值單獨的陣列,然後添加選項的<optgroup>標籤內的每個陣列。

+0

謝謝,但這不會做我想要的。如果你看我的小提琴,我希望列表包含1,1 +,2,2 +等。不僅是1,2,3。在這種情況下,我以前的解決方案工作得很好這裏重要的是我想在「1」後面「1+」而不是在「3」後面。這可能沒有修改我的評級列表? – daker