如何在 AngularJS 中设置选项值

Question

以下是我在控制器中设置的重复选项的代码 -

$scope.repeats = [
    {name: "No", value: 3},
    {name: "Every day", value: 6},
    {name: "Every week", value: 9},
    {name: "Every month", value: 12},
    {name: "Every year", value: 15},
];

以下是 HTML 模板中用于创建选择选项的代码 -

<select id="repeatval" 
        ng-model="event.repeat" 
        ng-options="repeat.value as repeat.name for repeat in repeats"
        ng-init="event.repeat = event.repeat || repeats[0].value" 
        class="btn">
</select>

以下是生成的代码-

<select class="btn ng-valid ng-dirty" ng-init="event.repeat = event.repeat || repeats[0].value" ng-options="repeat.value as repeat.name for repeat in repeats" ng-model="event.repeat" id="repeatval">
<option value="0">No</option>
<option value="1">Every day</option>
<option value="2">Every week</option>
<option value="3">Every month</option>
<option value="4">Every year</option>
</select>

现在您可以看到，这些值以 0, 1, 2, 3, 4 的形式出现，尽管我的预期是 - 3, 6, 9, 12, 15

让我知道我在这里的概念做错了什么。

仅供参考 - 如果我在安慰 console.log(event.repeat); 我得到正确的值 3、6 等

请让我知道我在这个概念上做错了什么。

Answer 1

你没有做错任何事，这就是ng-options 的工作原理。它为每个<option> 分配一个value 属性，这是数组中选项的索引。然后当 select 的 change 事件发生时，它会在数组中的该索引处查找对象，评估值表达式（在您的情况下为 event.value）并相应地设置 ng-model 的值。

如果您使用 AngularJS 方式，这对您来说应该不重要，因为几乎所有东西都将访问 model（范围），而不是 DOM。

但是，如果您必须为您的 <option> 标记正确设置 value 属性，请不要使用 ng-options 而是使用以下标记：

<select id="repeatval" 
        ng-model="event.repeat" 
        ng-init="event.repeat = event.repeat || repeats[0].value" 
        class="btn">
        <option ng-repeat="repeat in repeats track by repeat.value" value="{{repeat.value}}">
            {{repeat.name}}
        </option>
</select>

Working Plunkr