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

如果你正在以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>

工作Plunkr