2016-07-15 86 views
0

我是JavaScript新手,需要幫助來實現以下功能:當用戶輸入郵編時,表單中的任何其他條目都將被刪除,郵政編碼用於查找地址。如何在用戶輸入郵政編碼時清除表格?

我該怎麼做?以下是代碼由urgentcare領域我使用獲得位置附近:

(
function(){ 
    var $scope, $location; 
    var urgentCareApp = angular.module('urgentCareApp',['ui.bootstrap']); 

    urgentCareApp.controller('UrgentCareController',function($scope,$http,$location,anchorSmoothScroll){ 
     $scope.Lang = 'initVal'; 
     $scope.ShowResults = false; 
     $scope.ShowDesc = true; 
     $scope.NoResults = false; 
     $scope.currentPage = 1; 
     $scope.maxPageNumbersToShow = 10; 
     $scope.formModel = {}; 
     $scope.searchMode = 0; 
     $scope.miles = [{'value':'5'},{'value':'10'},{'value':'15'},{'value':'20' }]; 
     $scope.searchParam = {}; 

     $scope.searchParam.Distance = $scope.miles[0]; 
     console.log($scope.searchParam.Distance); 
     //$scope.searchParam.Specialty = $scope.Specialties[0]; 

     $scope.GetCurrentZip = function(){ 
      try{ 
       var lon, lat; 
       console.log('starting geoposition code.'); 
       if("geolocation" in navigator){ 
        window.navigator.geolocation.getCurrentPosition(function(pos){ 
         lat = pos.coords.latitude.toFixed(3); 
         lon = pos.coords.longitude.toFixed(3); 
         console.log(lat + ' ' + lon); 
         $http.get("/remote/ReturnCurrentZipcode.cfm?Lat=" + lat + "&Lon=" + lon) 
         .success(function(response){ 
          console.log('Response: ' + response); 
          $scope.searchParam.Zip = response; 
          console.log('object set'); 
         }) 
        }) 
       } 
       else{ console.log('No geolocation'); } 
      } 
      catch(err) { console.log(err.message); } 
     } 

     $scope.GetCityList = function(){ 
      try{ 
       $http.get("/remote/ReturnUrgentCareCityList.cfm") 
        .success(function(response){ 
         $scope.Cities = response.Cities; 
        }) 
      } 
      catch(err){} 
     } 

     $scope.SearchUrgentCare = function(searchParam){ 
      try{ 
       $scope.searchMode = 1; 
       var queryString=''; 
       if($scope.formModel && $scope.formModel !== searchParam){ 
        $scope.resultsCount = 0; 
        currentPage = 1; 
       } 
       if(searchParam){ 
        $scope.formModel = searchParam; 
        for(var param in searchParam){ 
         console.log(param + ' ' + searchParam.hasOwnProperty(param) + ' ' + searchParam[param]); 
         if(searchParam.hasOwnProperty(param)){ 
          var paramValue = searchParam[param].value ? searchParam[param].value.trim() : searchParam[param].trim(); 
          if (paramValue.length > 0) 
           queryString += param + '=' + paramValue + '&'; 
         } 
        } 
       } 
       console.log(queryString); 
       queryString= '?' + queryString + 'currentpage=' + $scope.currentPage; 

       $http.get("/remote/ReturnUrgentCareList.cfm" + queryString) 
       .success(function(response){ 
        $scope.urgentCareCenters = response.UrgentCareCenters; 
        $scope.resultsCount = response.rowCount; 
        if (!$scope.urgentCareCenters){ 
          $scope.NoResults = true; 
          $scope.ShowResults = false; 
          $scope.ShowDesc = false; 
         } 
        else{ 
          $scope.NoResults = false; 
          $scope.ShowResults = true; 
          $scope.ShowDesc = false; 
         } 
       }) 
      } 
      catch(err){ alert('No response.: ' + err.message); } 
     } 

     $scope.$watchGroup(['currentPage'], function(){ 
      try{ 
       if($scope.searchMode == 1){ 
        $scope.SearchUrgentCare($scope.formModel); 
        } 
      } 
      catch(err){} 
     }); 


     $scope.GetCityList(); 
     $scope.GetCurrentZip(); 

     $scope.gotoElement = function (eID){ 
      var browserWidth = screen.availWidth; 
      if (browserWidth < 768) 
       anchorSmoothScroll.scrollTo(eID); 
     }; 

    }); 

    urgentCareApp.service('anchorSmoothScroll', function(){ 
     this.scrollTo = function(eID) { 

      // This scrolling function 
      // is from http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript 

      var startY = currentYPosition(); 
      var stopY = elmYPosition(eID); 
      var distance = stopY > startY ? stopY - startY : startY - stopY; 
      if (distance < 100) { 
       scrollTo(0, stopY); return; 
      } 
      var speed = Math.round(distance/100); 
      if (speed >= 20) speed = 20; 
      var step = Math.round(distance/25); 
      var leapY = stopY > startY ? startY + step : startY - step; 
      var timer = 0; 
      if (stopY > startY) { 
       for (var i=startY; i<stopY; i+=step) { 
        setTimeout("window.scrollTo(0, "+leapY+")", timer * speed); 
        leapY += step; if (leapY > stopY) leapY = stopY; timer++; 
       } return; 
      } 
      for (var i=startY; i>stopY; i-=step) { 
       setTimeout("window.scrollTo(0, "+leapY+")", timer * speed); 
       leapY -= step; if (leapY < stopY) leapY = stopY; timer++; 
      } 

      function currentYPosition() { 
       // Firefox, Chrome, Opera, Safari 
       if (self.pageYOffset) return self.pageYOffset; 
       // Internet Explorer 6 - standards mode 
       if (document.documentElement && document.documentElement.scrollTop) 
        return document.documentElement.scrollTop; 
       // Internet Explorer 6, 7 and 8 
       if (document.body.scrollTop) return document.body.scrollTop; 
       return 0; 
      } 

      function elmYPosition(eID) { 
       var elm = document.getElementById(eID); 
       var y = elm.offsetTop; 
       var node = elm; 
       while (node.offsetParent && node.offsetParent != document.body) { 
        node = node.offsetParent; 
        y += node.offsetTop; 
       } return y; 
      } 
     }; 
    }); 

    urgentCareApp.directive('allowPattern',[allowPatternDirective]); 
    function allowPatternDirective(){ 
     return{ 
      restrict: "A", 
      compile: function(tElement, tAttrs){ 
       return function(scope, element, attrs){ 
        element.bind("keypress", function(event){ 
         var keyCode = event.which || event.keyCode; 
         var keyCodeChar = String.fromCharCode(keyCode); 

         if(!keyCodeChar.match(new RegExp(attrs.allowPattern, "i"))){ 
          event.preventDefault(); 
          return false; 
         } 
        }); 
       } 
      } 
     } 
    } 

    urgentCareApp.filter('PhoneNumber', function(){ 
    return function(phoneNumber){ 
     var dash = '-'; 
     if(phoneNumber){ 
      var pn = phoneNumber; 
      pn = [pn.slice(0, 6), dash, pn.slice(6)].join(''); 
      pn = [pn.slice(0, 3), dash, pn.slice(3)].join(''); 
      return pn; 
      } 
     return phoneNumber; 
     } 
    }); 

})(); 

的形式爲:

<div class="panel panel-default"> 
    <div class="panel-body"> 
     <form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate="" role="form"> 
      <div class="form-group"><input class="form-control" id="urgentcare" ng-model="searchParam.UrgentCareName" placeholder="Urgent Care Name" type="text" /></div> 

      <div class="form-group"><select class="form-control" id="city" ng-model="searchParam.City" ng-options="City.value for City in Cities"><option disabled="disabled" selected="selected" value="">City</option> </select></div> 

      <hr /> 
      <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div> 

      <div class="row"> 
       <div class="col-xs-7 no-right-padding"> 
        <div class="form-group"> 
         <div class="input-group"><select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"></select> 

          <div class="input-group-addon">miles</div> 
         </div> 
        </div> 
       </div> 

       <div class="col-xs-5 no-left-padding"> 
        <div class="form-group"><input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div> 
       </div> 
      </div> 

      <div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div> 
     </form> 
    </div> 
</div> 
+0

哪裏是你的形式?.. – developer033

+0

剛剛添加的形式 –

+0

我想清除所有字段如果用戶有輸入一個郵政編碼。當發生這種情況時,它應該顯示附近的位置 –

回答

0

不知道你現在要做什麼,但是可以肯定,你可以使用ngChange指令,所以當用戶輸入任何內容到Zip時,您可以在控制器中執行所需操作。

看到這個演示

(function() { 
 
    "use strict"; 
 
    angular.module('app', []) 
 
    .controller('mainCtrl', function($scope, $http) { 
 
     $scope.reset = function() { 
 
     // If you just want to clear the fields do it: 
 
     var zip = angular.copy($scope.searchParam.Zip); 
 
     $scope.searchParam = {}; 
 
     $scope.searchParam.Zip = zip; 
 
     } 
 
    }); 
 
})();
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     <form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate="" role="form"> 
 
     <div class="form-group"> 
 
      <input class="form-control" id="urgentcare" ng-model="searchParam.UrgentCareName" placeholder="Urgent Care Name" type="text" /> 
 
     </div> 
 

 
     <div class="form-group"> 
 
      <select class="form-control" id="city" ng-model="searchParam.City" ng-options="City.value for City in Cities"> 
 
      <option disabled="disabled" selected="selected" value="">City</option> 
 
      </select> 
 
     </div> 
 

 
     <hr /> 
 
     <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div> 
 

 
     <div class="row"> 
 
      <div class="col-xs-7 no-right-padding"> 
 
      <div class="form-group"> 
 
       <div class="input-group"> 
 
       <select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"></select> 
 

 
       <div class="input-group-addon">miles</div> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-5 no-left-padding"> 
 
      <div class="form-group"> 
 
       <input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" ng-change="reset()" type="text" /> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="form-group"> 
 
      <input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

+0

我沒有看到它的工作。沒有什麼事情發生在我的一端 –

+0

你期待它做什麼?告訴我。 – developer033

+0

我評論,因爲我不知道你想要什麼。也許你只想清除所有字段或者執行'$ http.get'來填充所有字段,最終你想要什麼? – developer033

-1

您應該使用的角度$範圍$手錶或NG-變更指令 例如,如果我要當變量做什麼。 $ scope.varA變化 您可以使用:

$scope.$watch("varA", function(){ 
    //my code 
    //in your case (type searchParams.Zip where i wrote varA) 
    var zip = $scope.searchParams.Zip; //keep before cleaning 
    $scope.searchParams = {}; 
    $scope.searchParams.Zip = zip; 
}); 

或聲明一個角度功能和用途NG-變化指令你在哪裏使用的NG-型號爲郵政編碼HTML輸入,(添加此作爲屬性:NG-變化=「clean_form();」)

$scope.clean_form = function(){ 
    var zip = $scope.searchParams.Zip; 
    $scope.searchParams = {}; 
    $scope.searchParams.Zip = zip; 
}; 

形式的清潔代碼來自developer033,我只是想告訴你,你怎麼可能會導致代碼發生

+0

請注意,當您使用$ scope.searchParams = {}時,angularJS雙向綁定將清除輸入。 –

+0

我的回答有什麼不同? – developer033

+0

你沒有建議$ scope。$ watch? –

相關問題