Question

在视图{{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);
        } 
});

查看

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

Answer 1

您有几件事情遗失了。首先，正如评论中所建议的那样，您只需要在最高级别ng-app的HTML中声明ng-controller和np-app一次。其次，使用输入字段中的ng-model或HTML中的{{phonenumber}}将范围数据绑定到HTML。第三，你忘了用一个结束括号关闭控制器。

这是一个有效的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

一些观察结果：

删除不必要的多个ng-controller =＆＃34; PosController＆＃34;和ng-app =＆＃34; myApp＆＃34;从代码开始，只留下一个在顶部。
使用ng-model="phonenumber"代替value="{{phonenumber}}"来执行双向数据绑定。

工作演示：

＆＃13;

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

＆＃13;

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

＆＃13;

控制器值未显示在Angularjs视图中

2 个答案: