CODEWITHSUNDEEP
jqueryangularjs
Rajitha Perera
Rajitha Perera

Reputation: 1621

Variables are not updated in Angularjs Controller

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');
    }        
}

Upvotes: 1

Views: 57

Answers (2)

Anders Vestergaard
Anders Vestergaard

Reputation: 1149

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.

Upvotes: 1

Robb Soares
Robb Soares

Reputation: 21

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

Upvotes: 1

Related Questions