How to get the value from text box on button click angular js

Question

  <form class="form-group has-success has-feedback" novalidate>
                <br/>
                <label class="control-label" for="inputSuccess2">Enter the Phone Number</label>
                <input type="number" class="form-control" ng-model="user.phonenum" name="phonenum" id="inputSuccess2">

                <button ng-click="myData.doClick(item, $event)" class="btn btn-primary">Get Mobile Phone Number Data</button>
            </form>

            <br/>
            Data from server: {{myData.fromServer.State}}


      <script>
        angular.module("myapp", [])
                .controller("MyController", function($scope, $http) {
                    $scope.myData = {};
                    $scope.myData.doClick = function(item, event) {

                        var responsePromise = $http.get("https://ajith-indian-mob-info.p.mashape.com/getInfo?mobno="+item, {headers: {'X-Mashape-Key': ''}});
                        responsePromise.success(function(data, status, headers, config) {
                            $scope.myData.fromServer = data;
                        });
                        responsePromise.error(function(data, status, headers, config) {
                            alert("AJAX failed!");
                        });
                    }


                });
    </script>

Hi i am new to angular how do i get the value from textbox into the controller angular?

wintenbb · Accepted Answer · 2014-12-23 11:03:53Z

3

Personally in my controller, I define the object user (for a better reading, this is not required)

$scope.user = {}

Then

<input type="number" class="form-control" ng-model="user.phonenum" name="phonenum" id="inputSuccess2">

will automatically bind the content of this textbox to the variable $scope.user.phonenum, you can access it, simply with :

$scope.myData.doClick = function() {
    var responsePromise = $http.get("https://ajith-indian-mob-info.p.mashape.com/getInfo?mobno="+$scope.user.phonenum, {headers: {'X-Mashape-Key': ''}});
    ...

answered Dec 23, 2014 at 11:03

wintenbb

4,1663 gold badges32 silver badges44 bronze badges

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

5 Comments

Naeem Shaikh Over a year ago

its not necessary to define $scope.user={}

wintenbb Over a year ago

Can't this prevent problems linked to Scope inheritance ?

Naeem Shaikh Over a year ago

what kind of problems?

wintenbb Over a year ago

Let's set this input text in a block with ng-if directive. Ng-if creates a new scope (that herites the Controller's scope), user will be defined in this scope but won't be visible in the controller

Naeem Shaikh Over a year ago

well that wont necessarily create a problem. but still it would be a good practice to follow.

Naeem Shaikh · Accepted Answer · 2014-12-23 11:03:07Z

1

you can get the value of model in your controller if it is inside the scope of the controler with $scope.ModelName

do this $scope.user.phonenum wherever you want the value of phone number

But check if the model is within the scope of the controller.

answered Dec 23, 2014 at 11:03

Naeem Shaikh

15.8k8 gold badges53 silver badges92 bronze badges

Comments

Carlos Verdes · Accepted Answer · 2014-12-23 11:04:30Z

1

with Angular you should change your way of thinking, in the controller you don't work with the view... you work with the model (and let the directives update that model). So, in your example the textbox is mapped to user.phonenum, so you could do something like $scope.user.phonenum in your controller.

answered Dec 23, 2014 at 11:04

Carlos Verdes

3,19724 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to get the value from text box on button click angular js

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related