AngularJS ng-model 值最初未显示在输入字段中答案

【问题标题】：AngularJS ng-model value not initially displayed in input fieldAngularJS ng-model 值最初未显示在输入字段中
【发布时间】：2014-08-09 02:14:56
【问题描述】：

我正在尝试使用 ng-repeat 遍历键数组并显示与每个键关联的场景值。当键值被硬编码时，视图代码工作。现在 ng-repeat 提供了键，输入字段最初不会显示关联的场景值。我正在使用 AngularJS 1.2.21。

这是设置 $scope 的控制器代码：

$scope.keys = KEYS; // array of strings
$scope.scenario = scenario; // object containing key: value pairs

这是生成输入的视图代码：

<form name="gameSettingsForm" novalidate ng-submit="validateAndSaveSettings()" class="form-horizontal" role="form">
    <div class="row">
        <div class="col-md-6">
            <div class="form-group" ng-repeat="key in keys">
                <div class="col-md-3">
                    <input type="number" required ng-disabled="readOnly" class="form-control"
                           ng-model="scenario[key]"
                           id='{{key}}' name='{{key}}'>
                    <p>input contains {{scenario[key]}}</p>
                </div>
            </div>
        </div>
    </div>
</form>

当页面加载时，输入字段为空，即使“输入包含”文本正确显示了场景[key] 值。页面加载时如何获取要在输入字段中显示的值？

更新：我已经注释掉了除了一个 KEY 数组项之外的所有项。激活它们后，大多数生成的输入字段在页面加载时都是空的。但是，其中一些会在页面加载时填充。所有“输入包含”字符串始终正确显示其场景[键]值。

解决方法：意识到显示的场景值已通过乘法修改。通过在显示之前将所有场景值乘以 1 来解决问题。

【问题讨论】：

你从哪里得到scenario对象？
你能发布这个过程吗？你通过异步方式加载数据。
数据加载在控制器被调用之前解决。正如问题描述中所述，所有值都显示在页面上——只是不是在每个输入字段中。
你能创建一个 plunkr 吗？
与您的问题无关，但请注意，在名称属性 (name="{{...}}") 中使用插值将无法使用父表单正确注册输入。因此，如果您尝试验证字段，您可能会遇到意外行为。查看此答案以获取更多信息和可能的解决方法：stackoverflow.com/questions/23616578/…

标签： angularjs ng-repeat

【解决方案1】：

解决方案是确保模型值是类型为“数字”的输入的数字。我通过乘法来做到这一点：

value = value * 1;

我创建了一个独立示例来演示当模型值不是数字时会出现问题：http://plnkr.co/qnFHafmIOWVW6eWkQsmk

【讨论】：