コントローラの値が表示されない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の1つを残す必要があります。最上位を除くすべてのdivから 'ng-app =" myApp "という子孫もすべて削除します。 – joaumg

ng-model = "phonenumber"を使用して、双方向データバインディングを使用することもできます。 https://docs.angularjs.org/api/ng/directive/ngModel –

どこにng-modelを追加する必要がありますか？ – HRCJ

いくつかの所見：ここ

は、作業のデモです

に、不要な複数のNG-コントローラ= "PosController" とngのアプリを削除します=」 myApp "をコードから削除し、先頭に1つだけ残します。
value="{{phonenumber}}"の代わりにng-model="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

本当にありがとうございました。私はダイヤルパッドを使用して電話番号を更新しました。このビューにはありません。別のビューを使用して電話番号を更新しました。この番号でこの番号を同時に更新する必要があります。 – HRCJ

厳密な要件を説明してもらえますか、ここでフィドルまたはplnkrリンクを提供することもできますか？ –

https://plnkr.co/edit/f6Uh8yUxVFV9d0minSMt?p=preview ここplnkr.butは今は仕事ではありませんが、あなたは私が何をsay.here 2にダイヤル番号と私のコードを表示するために他の2つのビューfile.Hopeあなたが私のprobを理解することを望んでいないcontroller.butで更新されたダイヤル番号。 – HRCJ

あなたが不足しているいくつかのものがあります。まず第一に、コメントで示唆されているように、とng-controllerを一度HTMLでnp-appの最上位レベルに宣言すればよい。次に、入力フィールド内にng-model、またはHTML内に{{phonenumber}}を使用して、スコープデータをHTMLにバインドします。第3に、終了括弧でコントローラーを閉じるのを忘れてしまった。

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

https://plnkr.co/edit/f6Uh8yUxVFV9d0minSMt?p=previewここplnkr.but今は仕事ではありませんが、あなたは私が何を言っているかを知ることができます。その2ダイヤル番号やその他のファイル私のコードを表示するために私のコードをダイヤルしました.2つのビューファイルでは表示されませんが、controller.butで更新されました。私の問題を理解することを願っています。 – HRCJ

ありがとうございました。 – HRCJ

コントローラの値が表示されないAngularjs

答えて

関連する問題