在 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.

---

有了下面的Fiddle，这里是一个可以看到bug的场景：

1. 打开Fiddle
2. status 输入将无效，尽管绑定的 变量已设置
3. 修改一下，点击“保存修改”：显示正确
4. 按 F5：变量在本地存储中正确更新，但在输入
中仍然没有显示
5. 请注意，情境输入仍然可以正常工作

victim.status和victim.situation的唯一区别是status是一个对象而situation是一个字符串.

---

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

JSFiddle of the code

---

我希望在加载页面时将状态输入默认设置为 victim.status，我该如何解决？

谢谢！

Answer 1

问题出在您的 ng-options，因为您的 select 列表是一个对象，请尝试添加 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 的原因是因为您 select 中的数组包含对象。这意味着生成的 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。

track by 所做的是替换 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"

我希望这解释得足够清楚，如果您需要更多说明，请告诉我。