在ng-options中显示本地存储的对象属性

Question

在我的Angular应用中，我将 victim 数据存储在本地存储中。在我看来，会显示 victim 数据，我们可以对其进行更新（来自<select>）：

<h1>Victim #{{victim.numero}}</h1>

<label>Victim status</label>
<select ng-model="victim.status" ng-options="s.libelle for s in status"></select>

<label>Victim situation</label>
<select ng-model="victim.situation" ng-options="s for s in situations"></select>

问题是，在刷新页面时，默认情况下不会显示victim.status中存储的值（它不为空）。奇怪的是，这适用于victim.numero和victim.situation。

使用以下小提琴，这是一个查看错误的方案：

1. 打开小提琴
2. 状态输入无效，但绑定的变量已设置
3. 修改它，点击＆＃34; 保存更改＆＃34;：它显示正确
4. 按F5：变量在本地存储中正确更新，但输入中仍未显示
5. 请注意，情境输入仍然可以正常使用

victim.status和victim.situation之间的唯一区别是状态是对象而情境是字符串。

我已经制作了一个虚拟代码来重现这个问题：

JSFiddle of the code

我想在加载页面时使用victim.status默认设置状态输入，我该如何修复？

谢谢！

Answer 1

问题出在您的ng-options中，因为您的选择列表是一个对象，请尝试添加track by

 <select ng-model="victim.status" ng-options="s.libelle for s in status track by s.libelle"></select>

JSFiddle of the working code

您必须使用track by的原因是因为您选择的数组包含对象。这意味着生成的html最终看起来像这样。

<select ng-model="victim.status" ng-options="s.libelle for s in status" class="ng-pristine ng-valid ng-touched">
    <option value="?" selected="selected"></option>
    <option label="Unknown" value="object:3">Unknown</option>
    <option label="Safe" value="object:4">Safe</option>
    <option label="Dead" value="object:5">Dead</option>
</select>

正如您所看到的，您的值victim.status不等于object:4。

跟踪的内容是替换value属性中的值，并使用模型的属性而不是整个模型。所以你的html就是这样出来的。

<select ng-model="victim.status" ng-options="s.libelle for s in status track by s.libelle" class="ng-pristine ng-valid ng-touched">
    <option label="Unknown" value="Unknown" selected="selected">Unknown</option>
    <option label="Safe" value="Safe">Safe</option>
    <option label="Dead" value="Dead">Dead</option>
</select>

而victim.status === "Safe"代替victim.status.libelle == "safe"

我希望这可以解释得很清楚，如果你想再澄清一下，请告诉我。