在输入字段中使用ng-model的Angular得到null

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

只是因为你设置了一个值“adultCount”而给出了null，而在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>

-

¹ <子> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types