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

Get input value in a variable in Angularjs before submit to call a webapi

本文关键字：Angularjs 变量 输入 获取 提交 调用 webapi 之前      更新时间：2023-09-26

我想访问可以在 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 调用。这就是为什么我试图在变量中获取输入值来完成任务的原因

无需为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;
                }); 
            };  
        });

不应从控制器代码访问 html 元素。Angular 的双向数据绑定已经将表单输入的值传输到 $scope.pinCode 变量中。因此，您只需要执行一些操作即可触发服务器调用。请参阅角度文档中的此示例：https://docs.angularjs.org/api/ng/directive/ngSubmit

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

只需在控制器的作用域上绑定zip和pat1

控制器： 

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

然后在邮政编码中

邮政编码功能：

    $scope.myZipcode = function myZipcode(){
       $scope,zip = document.getElementById("zip").value;
       $scop.pat1 = 'http://ziptasticapi.com/'+zip; 
    $http.get(pat1).success(function (response) {
    $scope.city = response.city;
    $scope.state = response.state;}
  }

完整代码：

<body ng-app="myApp">
   <div ng-controller="myCtr">
       <form  name="myForm">
           <input type="text" ng-model='pinCode'  id="zip" ng-blur="myZipcode">
           {{city}}
           {{state}}
       </form>
  </div>
  <script>
    myApp.controller('myCtr', function($scope, $http){
         $scope.zip = document.getElementById("zip").value || 0;
         $scope. pat1 = 'http://ziptasticapi.com/'+ $scope.zip || ''; 
         $scope.myZipcode();  
  $scope.myZipcode = function myZipcode(){
         $scope,zip = document.getElementById("zip").value;
         $scop.pat1 = 'http://ziptasticapi.com/'+zip; 
        $http.get(pat1).success(function (response) {
            $scope.city = response.city;
            $scope.state = response.state;}
           }
    });
  </script> 
</body>
相关文章：