javascript - 如何在 AngularJS 中设置选项值

Question

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

$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>那是数组中选项的索引。然后当选择的change事件发生时，它在数组中查找该索引处的对象，计算值表达式(在您的例子中为 event.value)并设置 ng-model相应的值(value)。

如果您以 AngularJS 的方式做事，这对您来说不重要，因为几乎所有内容都将访问模型(作用域)，而不是 DOM。

但是，如果您必须设置 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