控制器值不在圖，示出Angularjs

在視圖{{phonenumber}}值不更新。但是當我輸入數字時，警報在控制器內正常工作。控制器值不在圖，示出Angularjs

控制器

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

查看

<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>

來源

2017-01-27 HRCJ

你應該先刪除幾個'NG-控制器= 「PosController」'從代碼，只留一個在最上面的DIV。除了最上面的每個div，還要刪除所有後代'ng-app =「myApp」'。 – joaumg

您也可以使用ng-model =「phonenumber」來使用雙向數據綁定。 https://docs.angularjs.org/api/ng/directive/ngModel –

我應該在哪裏添加ng模型？ – HRCJ

一些觀察：

除去不必要的多個納克控制器= 「PosController」和NG-應用=」 myApp「，然後在頂部留下一個。
使用ng-model="phonenumber"代替value="{{phonenumber}}"進行雙向數據綁定。

工作演示：

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>

來源

2017-01-28 08:43:13

非常感謝您使用撥號pad.So不在此view.I用另一種觀點來更新手機number.So我需要在此視圖的同一時間更新這個數字這answer.Actually我更新了電話號碼。 – HRCJ

你能解釋一下你的具體要求嗎？或者你也可以在這裏提供小提琴或plnkr鏈接。 –

https://plnkr.co/edit/f6Uh8yUxVFV9d0minSMt?p=preview 這裏的plnkr.but現在它不是work.but你可以知道我要說什麼。這裏有2個視圖files.one撥號號碼和其他顯示。在我的代碼撥號控制器中更新的數字。但這不是在2視圖文件中查看。希望你明白我的概率。 – HRCJ

有幾件事情你錯過了。首先，所有的，如評論所說，你只需要在HTML與np-app在最頂層聲明ng-app和ng-controller一次。其次，你的範圍數據綁定到使用HTML ng-model一個輸入字段內，或{{phonenumber}}的HTML。第三，你忘了關閉控制器結束括號。

這裏是一個工作演示：

var app = angular.module('myApp', []); 
 
    app.controller('PosController', function ($scope, $http) { 
 
     $scope.phonenumberFromDial = ""; 
 
     $scope.phonenumber = ""; 
 
     \t $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); 
 
      } 
 
    \t } 
 
    });

<!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>

來源

2017-01-27 21:21:12 Wei

非常感謝您使用撥號pad.So不在此view.I用另一種觀點來更新手機number.So我需要在此視圖的同一時間更新這個數字這answer.Actually我更新了電話號碼。 – HRCJ

https://plnkr.co/edit/f6Uh8yUxVFV9d0minSMt?p=預覽這裏的plnkr.but現在它不是work.but你可以知道我要說什麼。這裏有2個視圖files.one撥號號碼和其他對於showing.in我的代碼撥打的號碼更新controller.but未在2視圖file.Hope你明白我的概率 – HRCJ

查看謝謝你，我發現解決方案。 – HRCJ

控制器值不在圖，示出Angularjs

回答

相關問題