Angular using ng-model in input field get null

Question

I know how to pass a value from a view to a controller using ng-model. In the controller it just gets the value from the view using this code $scope.name = this.ngmodelnameinview.

Is it compulsory to use ng-model in field view?

but my problem now is, I have + button, which when I click the button it will automatically put the value inside input text field.

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

see picture below:

but when I add ng-model inside input field, it returns null

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

How to fix this? Thanks!

Answer 1

JavaScript is case sensitive:

JavaScript is case-sensitive and uses the Unicode character set.¹

Use the same case for the scope variable. Update the input attribute ng-model to match the varible - i.e.:

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

should be:

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

See this demonstrated in the snippet below:

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}

Answer 2

It is giving null just because you have set a value "adultCount" and in ng-model you had given a different name "adultcount" ('c' is in lower case). By updating ng-model with "adultCount", will solve this issue.