how to get the value of an input field in angularJS controller

Question

When I try to get the value of an input field in my controller it is always undefined. It seems like the angularJS two-binding is not working.

This is the angularJS code:

 app.controller('MainCtrl', $scope)
    {
        var quan = $scope.quantity;
        alert(quan);
    }

the html

<form ng-controller="MainCtrl" class="form-inline" role="form" padding-left:10em">
    
       <input type="text" class="form-control" id="quantity" ng-model="quantity" />
    
    </form>

I cannot get the value of the input in my controller.

Pasukaru · Accepted Answer · 2016-04-04 10:19:53Z

1

First, your syntax is incorrect, see hadiJZ answer. Second, the controller will be called once after it is created, so if you change the text afterwards, you will not see the alert another time.

answered Apr 4, 2016 at 10:19

Pasukaru

1,1051 gold badge10 silver badges23 bronze badges

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

2 Comments

Lamin L Janneh Over a year ago

So how can I get the value in the controller?

Pasukaru Over a year ago

That depends on where you get the value from. If the original data is in the scope, you could use a watch: $scope.$watch('value', function(changedValue, previousValue){ ... do something with changedValue }); The watch will fire whenever the value changes within the $scope. A more clean approach would be to utilize ng-change, though this only works if you only have one specific element (in your case the input field) that writes to the value, or all elements call the change function.

Haseeb Mazhar Ranga · Accepted Answer · 2016-04-04 10:42:49Z

0

If you add this into your controller, it will show alert every time you change the input value.

 $scope.$watch(function() {
      return $scope.quantity;
    }, function(quantity) {
      alert(quantity);
    });

answered Apr 4, 2016 at 10:42

Haseeb Mazhar Ranga

5751 gold badge6 silver badges16 bronze badges

Comments

Lamin L Janneh · Accepted Answer · 2016-04-04 11:15:13Z

I found an approach that work for me.

this is the angular

$scope.changedValue = function (item,quan)
    {

        if (item != null && quan !=null)
        {

            $http.get('/api/product/'+ item).success(function (data)
            {

                $scope.amount = parseFloat(data.price * quan);

            });

        }
    }

and the is the html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <form  class="form-inline" >

       <input type="text" class="form-control" id="quantity" ng-model="quantity" />
       <select class="form-control" id="selected_id" ng-model="selected_id" ng-options="c.Value as c.Text for c in pcategoryA"
                                        ng-change="changedValue(selected_id,quantity)">
    </form>
</div>

vvvvv · Accepted Answer · 2022-03-23 13:09:15Z

-1

To get the value of an field from AngularJS, you would need to have ID set on it like this:

<input id="RandomValue" type="text">

In AngularJS, do this to get the value:

$scope.RandomValue = angular.element('#RandomValue').val();

edited Mar 23, 2022 at 13:09

vvvvv

32.8k19 gold badges70 silver badges103 bronze badges

answered May 5, 2016 at 20:16

shiva reddy

4674 silver badges10 bronze badges

Collectives™ on Stack Overflow

how to get the value of an input field in angularJS controller

4 Answers 4

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Related