时间戳

首页 > 解决方案 > Angularjs 1.5 版选择语句在刷新时未显示所选值

html - Angularjs 1.5 版选择语句在刷新时未显示所选值

问题描述

我想知道为什么当用作 <\select> 标记（不是 ng-select）中的值时，字符串会在页面刷新时加载保存的下拉值，但整数不会显示值。假设 formData.maritalStatus 等于“Married”或“1”，具体取决于下面的示例值。

This works when formData.maritalStatus = "Married"
                        <div class="form-group form-group-sm">
                            <label class="col-sm-2 control-label" for="maritalStatus">Marital Status</label>
                            <div class="col-sm-4">
                                <select class="form-control" name="maritalStatus"
                                        ng-model="formData.maritalStatus">
                                    <option value=""></option>
                                    <option value="Married">Married</option>
                                    <option value="Single">Single</option>
                                    <option value="Divorced">Divorced</option>
                                    <option value="Widowed">Widowed</option>
                                </select>
                            </div>
                        </div>
​
This does not work when formData.maritalStatus = "1"
​
                        <div class="form-group form-group-sm">
                            <label class="col-sm-2 control-label" for="maritalStatus">Marital Status</label>
                            <div class="col-sm-4">
                                <select class="form-control" name="maritalStatus"
                                        ng-model="formData.maritalStatus">
                                    <option value=""></option>
                                    <option value="1">Married</option>
                                    <option value="2">Single</option>
                                    <option value="3">Divorced</option>
                                    <option value="4">Widowed</option>
                                </select>
                            </div>
                        </div>

这纯粹是教育性的，因为字符串可以满足我的需要。

标签： htmlangularjs

解决方案

不幸的是，这不适用于旧版本的 AngularJS。AngularJS 1.6.x 及更高版本将使用 ng-value 指令工作（这将为您提供所需的内容）。

<option ng-value="1">Married</option>

但是，可以在 AngularJS 文档中找到一个解决方案，它基本上使用解析器和格式化程序。当模型更改时，格式化程序将 int 转换为字符串，而解析器执行相反的操作（字符串到 int）。

https://code.angularjs.org/1.4.6/docs/api/ng/directive/select#binding-select-to-a-non-string-value-via-ngmodel-parsing-formatting

查看上面的链接以查看使用 1.6.x 之前的任何应用程序的解决方案（直接取自 AngularJS 文档）。如果您还没有看过，我认为您也可以从使用 ng-options 中受益。它用于动态列表而不是硬编码选项。

喜欢就看看吧！ https://code.angularjs.org/1.5.11/docs/api/ng/directive/ngOptions

推荐阅读