Variables are not updated in Angularjs Controller

Question

I need to update phone number to the controller when it is taken from a dial pad. When dial pad exceed 9 digits console log showing the number but it is not updated in Controller.Inside the controller function I added alert. So alert showing undefined variable.

Controller

var app = angular.module('myApp', []);
app.controller('PosController', function ($scope, $http) {
    $scope.phonenumber="";
    var url = window.location.protocol + "://" + window.location.host + "/" + window.location.pathname;
    $scope.updatePhone = function (id) {
        $scope.phonenumber=id;
        alert('Here the number should be, but is not: '+ id + "---:" + $scope.phonenumber);
        $scope.phonenumber="";
    };
});

View

<div ng-app="myApp" ng-controller="PosController" class="panel" >
    <div class="input-group col-xs-4">  
        <div class="input-group-btn">
            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Telefono</button>
        </div><!-- /btn-group -->        
        <div ng-app="myApp" ng-controller="PosController">
            <input  id="phonenumber" class="form-control" ng-model="phonenumber" />
            <!--<input type="text" id="phonenumber" ng-model="myModel" ng-keyup="(myModel.length >= 3) && myFunction()" class="form-control" data-inputmask='"mask": "(999) 999-9999"' data-mask>-->
        </div>
        <div class="input-group-btn" >
            <button type="button" class="btn btn-success">Cliente</button>
        </div><!-- /btn-group -->
        <div ng-app="myApp" ng-controller="PosController">
            <input type="text" id="cliente" onclick="valor();" class="form-control" ng-focus="updatePhone($('#phonenumber').val());"> 
        </div>
    </div> 
</div>

Function

function updatePhoneNumber(btnpressed){          
    $("#phonenumber").val($("#phonenumber").val() + btnpressed);
    if ($("#phonenumber").val().length >9){           
        console.log('validando '+ $("#phonenumber").val());
        $('#cliente').focus();
        $('#myModal').modal('hide');
    }        
}

You need to change to ng-click instead of standard DOM events and also use Angular compatible modals. Also if you are going to be changing urls, you'd want to use $location service and get/set location via method like $location.path() — Alexander Staroselsky
– Alexander Staroselsky, Commented Jan 27, 2017 at 15:41
Combining Angular with JQuery is not a good idea, Angular has its own cycle and the last thing you want is to try to keep that in sync with other techs. — Andrei Dragotoniu
– Andrei Dragotoniu, Commented Jan 27, 2017 at 15:44

Anders Vestergaard · Accepted Answer · 2017-01-27 15:56:01Z

1

There is alot "wrong" in your code, but angular takes time when you come from a JQuery world. A rule of thumb: "Don't use JQuery with Angular".

I've made a simple plunker to illustrate, how you can achieve your goal in a simple way:
https://plnkr.co/edit/K6G95OFsaYt3AAJVujZf?p=preview

Study it a bit.

The most important points:
1. Dont use ng-app and ng-contoller all the time.
2. Use ng-clickto handle click events
3. JQuery is to no use here.

The controller:

app.controller('MainCtrl', function($scope) {


  $scope.phonenumberFromDial = "";
  $scope.phonenumber = "";

  var url = window.location.protocol + "://" + window.location.host + "/" + window.location.pathname;

  $scope.updatePhoneNumber = function() {

    if($scope.phonenumberFromDial.length > 9) {
      console.log("Log phonenumber: " + $scope.phonenumberFromDial);
    } else {
      $scope.phonenumber = $scope.phonenumberFromDial;
    }

  };

});

View

  <div>
    Phonenumber from dial:
    <input type="text" ng-model="phonenumberFromDial"/>
    <br>
    <button ng-click="updatePhoneNumber()">Save Phonenumber</button>

    <div>
      Saved phonenumber in controller: {{phonenumber}}
    </div>
  </div>

This is a simple plunker just for understanding the basics. I hope I've understood your problem correctly.

answered Jan 27, 2017 at 15:56

Anders Vestergaard

1,1491 gold badge14 silver badges21 bronze badges

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

5 Comments

Rajitha Perera Over a year ago

Really appreciate your help.Actually I need while entering the number it need to check that condition.How can I achieve that one using angular?

Anders Vestergaard Over a year ago

I would use ng-change then. Here have a look: plnkr.co/edit/etKun9IdhGOrhcExQ6Wi?p=preview You can also use angular getterSetter, but ng-change is simple.

Anders Vestergaard Over a year ago

Cool! Good luck with angular.

Rajitha Perera Over a year ago

I have another problem.can you help me?

Anders Vestergaard Over a year ago

Sure, Im at a party at the moment please start a private chat. But Im first gonna react tomorrow (current time 23.40) but sure Ill help you. Im a Typescript fan so maybe Ill convert you.

Robb Soares · Accepted Answer · 2017-01-27 15:52:44Z

1

You should not combine JQuery and AngularJs. What you are trying to achieve can be done with a simple routine in the controller.

Try use ng-click in the html file to call your routine for phone

AngularJs and JQuery should only be used in custom directives or components

answered Jan 27, 2017 at 15:52

Robb Soares

212 bronze badges

Collectives™ on Stack Overflow

Variables are not updated in Angularjs Controller

Controller

View

Function

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Controller

View

Function

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related