在輸入字段中使用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

僅僅因爲你設置了一個值「adultCount」而在ng模型中給出了一個不同的名字「adultcount」（'c'是小寫的），它會給出null。通過用「adultCount」更新ng模型，將解決這個問題。

Answer 2

JavaScript是大小寫敏感的：

JavaScript是大小寫敏感的，並使用Unicode字符集。 ¹

使用相同的情況下爲範圍可變。更新輸入屬性ng-model匹配varible - 即：

<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}