页面刷新时未设置角度选择的选定值答案

【问题标题】：Selected value for angular select not be set on page refresh页面刷新时未设置角度选择的选定值
【发布时间】：2014-06-27 14:32:05
【问题描述】：

我的 angularjs 选择的选定值未在页面刷新时设置。

如果我导航到其他视图然后再次导航回来，它已设置。
select 的模型保存到本地存储并初始化到作用域 onload。
我检查了再次导航和刷新页面这两种情况下范围内的数据是一样的。数据完全相同。

After a lot of investigation, I see that when the select is pristine, or when the page is refreshed, the select list will have an extra blank option, like first one below with value @987654322 @：

<select ng-model="question.answer" class="form-control" ng-options="opt as opt.value for opt in question.options" >
    <option value="?" selected="selected"></option>
    <option value="0">1</option>
    <option value="1">2</option>
</select>

注意上面的 HTML 是输出。我的 Angular 视图只有：

<select ng-model="question.answer" class="form-control" ng-options="opt as opt.value for opt in question.options" />

我不确定为什么这会阻止选择正确的选项，因为正确的对象仍然存在于 question.answer。请参阅以下模型的简化版本：

var question = {
    options: [
        {
            id: 1,
            value: "1"
        },
        {
            id: 2,
            value: "2"
        }
    ],
    answer: {
        id: 2,
        value: "2"
    }
};

我的理解是在ng-options中，第一个opt指定这是应该赋给ng-model中指定的变量的值。换句话说，我会将选项数组中的一个对象分配给question.answer，而不仅仅是值。通过查看模型，我可以看出情况就是这样。

但我不确定 Angular 将如何使用 question.model 中的值来确定将哪个选项设置为选中。

我想知道问题是否与选项的值被设置为 question.options 的索引这一事实有关，并且无法从question.answer 答案的索引中解决。

所以，我想我的问题是： - 当这个额外的<option value="?" selected="selected"></option> 存在时，为什么没有设置正确的选项？ - Angular 如何确定如何使用模型来设置选定的选项（又名 - 选项值中那些有趣的索引是什么？）

抱歉这篇文章太长了。感谢阅读。

更新： 使用 Chrome AngularJS Batarang 扩展，选择列表的值设置为 question.answer 例如：

 { 
    $ref: $["options"][1]
 }

这意味着选择列表的值为“2”。

这就是它使用选项索引的方式，但是我必须如何设置我的模型？即使用$ref 等？

【问题讨论】：

您在表单控件的末尾缺少一个 "
干杯@M21B8。这只是因为这个例子的编辑。真实代码有效。我已经编辑了我的问题。
认为可能是这样，只是想检查一下！
在使用ng-options 时不要对任何<option> 元素进行硬编码，除了带有空值的<option>，这意味着“未选中”。 See the documentation.
嗨@Blackhole。我没有硬编码任何<option> 元素。我可能没有说清楚，但问题中显示的 html 是我在 chrome devtools 中查看的输出。我只是使用普通的<select>。我将更新我的问题以明确这一点。

标签： javascript angularjs

【解决方案1】：

在查看了您的操作后，我编辑了答案。

ng-options 属性有一个跟踪表达式来执行您所说的操作：

ng-options="opt as opt.Value for opt in question.options track by opt.id"

查看更新的小提琴：http://jsfiddle.net/CkLEu/6/

【讨论】：