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!

Aravind · Accepted Answer · 2017-02-02 03:12:08Z

1

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.

answered Feb 2, 2017 at 3:12

Aravind

2,3401 gold badge14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-10-09 04:03:39Z

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}

Collectives™ on Stack Overflow

Angular using ng-model in input field get null

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related