Question

我想访问一个可以在AngularJS中使用的变量中的输入字段值，这样我就可以将它添加到一个字符串中，借助它我可以调用一个rest api。

请帮助。

<body ng-app="myApp">
   <div ng-controller="myCtr">
       <form  name="myForm">
           <input type="text" ng-model='pinCode'  id="zip" onBlur="myZipcode">
           {{city}}
           {{state}}
       </form>
  </div>
  <script>
    var zip;
    var pat1;
      function myZipcode(){
           zip = document.getElementById("zip").value;
           pat1 = 'http://ziptasticapi.com/'+zip;   
      }
    var myApp = angular.module('myApp' , []);
    myApp.controller('myCtr', function($scope, $http){
        var path = 'http://ziptasticapi.com/12345'  
        $http.get(pat1).success(function (response) {
        $scope.city = response.city;
        $scope.state = response.state;});    
    });
  </script> 
</body>

在http.get服务中，如果我使用路径变量而不是pat1，它就可以工作。另一件事我希望状态和城市动态来源，而不需要提交表单并从REST API调用。这就是为什么我试图在变量中获取输入值来完成任务

Answer 1

无需为pinCode定义额外的var，因为您使用了ng-model，因此您可以从控制器访问pinCode。也应使用ng-blur代替onBlur。

您可以使用

HTML：

<input type="text" ng-model='pinCode'  id="zip" ng-blur="myZipcode()">

控制器：

    var myApp = angular.module('myApp' , []);
    myApp.controller('myCtr', function($scope, $http){
            $scope.pinCode= ''; // defaulr empty
            var path = 'http://ziptasticapi.com/';
            $scope. myZipcode = function() {
                $http.get(path + $scope.pinCode).success(function (response) {
                   $scope.city = response.city;
                   $scope.state = response.state;
                }); 
            };  
        });

Answer 2

只需在控制器范围内绑定:hover和<style media="screen" type="text/css"> .green a:hover {background-color: #799f34;} .blue a:hover {background-color: #2c8cba;} </style>

<强>控制器：

zip

然后以邮政编码

邮政编码功能：

pat1

完整代码：

myApp.controller('myCtr', function($scope, $http){
     $scope.zip = document.getElementById("zip").value || 0;
     $scope. pat1 = 'http://ziptasticapi.com/'+ $scope.zip || ''; 
     $scope.myZipcode();  
});

Answer 3

您不应该从控制器代码中访问html元素。 Angular的双向数据绑定已经将表单输入的值传递给myApp.controller('myCtr', function($scope, $http) { $scope.doCall = function() { // $scope.pinCode() is set here $scope.$http.get(...).then( function(response) { $scope.city = response.data.city; // or similar } ); } });变量。因此，您只需要一些操作即可触发服务器调用。请参阅角度文档中的此示例：https://docs.angularjs.org/api/ng/directive/ngSubmit

{{1}}

在提交调用webapi之前，在Angularjs中的变量中获取输入值

3 个答案: