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的工作方式。它为每个value分配一个<option>属性，该属性是数组中选项的索引。然后当select的change事件发生时，它会在数组中的该索引处查找对象，计算值表达式（在您的情况下为event.value）并相应地设置ng-model的值

如果您正在使用 AngularJS方式，这对您来说不重要，因为几乎所有内容都将访问模型（范围），而不是DOM。< / p>

但是，如果您必须为value标记正确设置<option>属性，请不要使用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

如何在AngularJS中设置选项值

1 个答案: