Question

我是AngularJS的新手，我无法弄清楚如何生成<option> list。

我想要的输出就像这个小提琴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]，无法更改。如何在不改变评级变量的情况下实现这一目标？

Answer 1

您应该使用ngOptions-directive来管理您的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>

Answer 2

您实际上想要在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字段，您甚至可以使用

对选项进行分组

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

有关select指令和ng-options属性的详细信息，请参阅docs。

基本上你正在看的内容是

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

根据group by的值，将rate.bracket评级分为不同的数组，然后在<optgroup>代码中为每个数组添加选项。

data-ng-repeat和<option>标签</option>

2 个答案: