1

In the view {{phonenumber}} value is not updating. But When I enter digits alert is working properly inside the controller.

Controller

var app = angular.module('myApp', []);
    app.controller('PosController', function ($scope, $http) {
        $scope.phonenumberFromDial = "";
        $scope.phonenumber = "";
        $scope.updatePhoneNumber = function(id) {
        $scope.phonenumberFromDial=id;
        $scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
        if($scope.phonenumber.length > 9) {
            console.log("Log phonenumber: " + $scope.phonenumberFromDial);
            alert('Here the Number: '+ $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"  class="form-control"  value="{{phonenumber}}"> 
        </div>
    </div> 
</div>
Improve this question
5
  • 3
    You should first remove the several ng-controller="PosController" from the code and only leave one at the upmost div. Also remove all the descendant ng-app="myApp" from every div except the upmost. Commented Jan 27, 2017 at 20:31
  • You could also use ng-model="phonenumber" to use 2-way data binding. docs.angularjs.org/api/ng/directive/ngModel Commented Jan 27, 2017 at 20:33
  • to where should I add ng-model? Commented Jan 27, 2017 at 20:36
  • joaumg-I removed those but still no value is passing to the view Commented Jan 27, 2017 at 20:43
  • You are missing parentheses in your controller. And if you remove the extra ng-app and ng-controllers like @joaumg mentioned, it will work. I verified it. Commented Jan 27, 2017 at 20:49

2 Answers 2

Reset to default
1

Some observations :

  • remove unecessary multiple ng-controller="PosController" and ng-app="myApp" from the code and leave with only one at the top.
  • use ng-model="phonenumber" instead of value="{{phonenumber}}" to perform two way data binding.

Working demo :

var app = angular.module('myApp', []);
    app.controller('PosController', function ($scope, $http) {
        $scope.phonenumberFromDial = "";
        $scope.phonenumber = "";
        $scope.updatePhoneNumber = function(id) {
        $scope.phonenumberFromDial=id;
        $scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
        if($scope.phonenumber.length > 9) {
            console.log("Log phonenumber: " + $scope.phonenumberFromDial);
            alert('Here the Number: '+ $scope.phonenumber);
        } 
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="PosController" class="panel" >
    <div class="input-group col-xs-4">
        <input type="text" id="phonenumber" class="form-control" ng-model="phonenumber"/>
        <div class="input-group-btn" >
            <button type="button" class="btn btn-success" ng-click="updatePhoneNumber(phonenumber)">Cliente</button>
        </div>
        <input type="text" id="cliente" class="form-control"  ng-model="phonenumber">
    </div>
</div>

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

4 Comments

Thank you very much for this answer.Actually I updated phone number using dial pad.So is not in this view.I used another view to update phone number.So I need to update that number at the same time in this view.
Can you please explain your exact requirement or you can also provide fiddle or plnkr link here.
plnkr.co/edit/f6Uh8yUxVFV9d0minSMt?p=preview here the plnkr.but now it is not work.but you can get idea what i am going to say.here 2 view files.one for dial numbers and other for showing.in my code dialed numbers updated in controller.but that is not view in 2 view file.Hope you get understand my prob.
Thank you I found that solution.
1

There are several things you're missing. First of the all, as suggested in comment, you only need to declare ng-app and ng-controller once in the HTML with np-app on the top-most level. Secondly, you bind the scope data to the HTML using ng-model inside a input field, or {{phonenumber}} in HTML. Third, you forgot to close the controller with an ending parenthesis.

Here is a working demo: 

var app = angular.module('myApp', []);
    app.controller('PosController', function ($scope, $http) {
        $scope.phonenumberFromDial = "";
        $scope.phonenumber = "";
     	$scope.updatePhoneNumber = function(id) {
          $scope.phonenumberFromDial=id;
          $scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
          if($scope.phonenumber.length > 9) {
            console.log("Log phonenumber: " + $scope.phonenumberFromDial);
            alert('Here the Number: '+ $scope.phonenumber);
          } 
    	}
     });
<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
  </head>
  <body>
    <div class="panel" >
  <div class="input-group col-xs-4" ng-controller="PosController">  
    <div class="input-group-btn">
      <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Telefono</button>
    </div><!-- /btn-group -->        
    <div>
        <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>
      <input type="text" id="cliente"  class="form-control"  ng-model="phonenumber"> 
    </div>
    <span>Phone#: {{phonenumber}}</span>
     <div>
      Dial: <input type="text" id="cliente"  class="form-control"  ng-model="phonenumberFromDial"> 
    </div>
     <div class="input-group-btn" >
      <button type="button" class="btn btn-success" ng-click="updatePhoneNumber(phonenumberFromDial)">Update phone#</button>
    </div><!-- /btn-group -->
  </div> 
</div>
  </body>
</html>

Improve this answer

3 Comments

Thank you very much for this answer.Actually I updated phone number using dial pad.So is not in this view.I used another view to update phone number.So I need to update that number at the same time in this view.
plnkr.co/edit/f6Uh8yUxVFV9d0minSMt?p=preview here the plnkr.but now it is not work.but you can get idea what i am going to say.here 2 view files.one for dial numbers and other for showing.in my code dialed numbers updated in controller.but that is not view in 2 view file.Hope you get understand my prob
Thank you I found that solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.