javascript - 在一种情况下，输入文本不会更新与相同形式的另一种情况相同的 Angular 模型

Question

我有一个简单的表单(从实际表单简化以演示问题):

<pre>Name: {{currentChild.name}}</pre>
<pre>Annual College Expense: {{currentChild.annualCollegeExpense}}</pre>
<form name="childForm" novalidate>
    <div class="form-inline">
        <div class="form-group">
            <label>Name:</label>
            <input type="text" name="name" class="form-control" ng-minlength="1" ng-model="currentChild.name" ng-required="true">
            <div class="help-block"
                 ng-messages="childForm.name.$error"
                 ng-show="childForm.$submitted || childForm.name.$dirty || (childForm.name.$invalid && childForm.name.$touched)">
                <p ng-message="required" ng-hide="childForm.name.$valid">Your name is required.</p>
                <p ng-message="minlength" ng-hide="childForm.name.$valid">Your name is too short.</p>
            </div>
        </div>
        <div class="form-group">
            <label>Annual Expenses:</label>
            <input type="text" name="annualCollegeExpense" class="form-control" ngModel="currentChild.annualCollegeExpense" />
        </div>
    </div>
</form>

当我启动表单时，我在表单顶部的 pres 中看到了预期的数据。当我在名称字段中输入内容时，预置中的名称会发生​​变化。当我在年度费用字段中输入时，年度费用预付款不会改变。

因为它们是相同的并且似乎遵守所有常见的 ng-model 规则，即使用 .要引用模型中的数据，我被难住了。

有人有建议吗？

Answer 1

您使用了 ngModel 而不是 ng-model 所以您应该使用

 ng-model="currentChild.annualCollegeExpense"

而不是

ngModel="currentChild.annualCollegeExpense"

使用

<input type="text" name="annualCollegeExpense" class="form-control" ng-model="currentChild.annualCollegeExpense" />