javascript - 在输入字段中使用 ng-model 的角度为空

Question

我知道如何使用ng-model. 在控制器中，它只是使用此代码从视图中获取值$scope.name = this.ngmodelnameinview。

是否必须ng-model在视野范围内使用？

但我现在的问题是，我有+按钮，当我单击按钮时，它会自动将值放入输入文本字段中。

<button data-ng-click="adultCount = adultCount+1"> + </button>
<input type="text" name="totTicket" value="{{adultCount}}">

见下图：

但是当我ng-model在输入字段中添加时，它会返回null

<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultcount">

如何解决这个问题？谢谢！

Answer 1

它给出 null 只是因为您设置了一个值“adultCount”，并且在 ng-model 中您给了一个不同的名称“adultcount”（“c”是小写的）。通过使用“adultCount”更新 ng-model，将解决此问题。

Answer 2

JavaScript 区分大小写：

JavaScript 区分大小写并使用 Unicode 字符集。¹

对范围变量使用相同的大小写。更新输入属性ng-model以匹配变量 - 即：

<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultcount">

应该：

<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultCount">
<!--                                                                      ^   -->

请参阅下面的代码片段中演示的内容：

angular.module('app', [])
.controller('ctrl', function($scope) {
     //adultCount could be initialized here
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button data-ng-click="adultCount = adultCount+1"> + </button>
totTicket:
<input type="text" name="totTicket" value="{{adultCount}}">
totTicket (adultCount):
<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultCount">
</div>

——</p>

¹ _{https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types}