2017-09-25 6 views
0

複数のピックアップおよびドロップ位置に対して繰り返されるdivがあります。anglejsのng-modelでautocompleted lat long値を取得し、mongooseを使用してmongodbに保存する方法

index.htmlを

<div class="pickUpLocationSection" ng-repeat="pickUp in pickUpItems"> 
<div class="pick" id="pick1"> 
    <div class="form-group pickup" id="pickup1"> 
     <label class="control-label col-sm-2" for="fleet-type">Pickup Location</label> 
     <div class="col-sm-5"> 
      <div id="custom-search-input"> 
       <div class="input-group col-md-12"> 
        <input type="text" class="search-query form-control placepicker" placeholder="Enter Location" id="pickUpLocation" data-latitude-input="#latitudePick_1" ng-model="pickUp.pickUpLocation_1" data-longitude-input="#longitudePick_1" /> 
        <!-- <input type="hidden" class="pickPlace" ng-model="pickPlace_1" id="pickPlace_1" /> --> 
        <input type="text" class="latPick" id="latitudePick_1" ng-model="pickUp.latitudePick_1" /> 
        <input type="text" class="longPick" id="longitudePick_1" ng-model="pickUp.longitudePick_1" /> 
        <span class="input-group-btn"> 
              <button class="btn btn-danger" type="button"> 
              <span class=" glyphicon glyphicon-search"></span> 
        </button> 
        </span> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class=" form-group"> 
     <label class="control-label col-sm-2" for="customer-name"></label> 
     <div class="col-sm-2 border-dotted"> 
      <div id="custom-search-input"> 
       <div class="input-group col-md-12"> 
        <div class="input-group date" data-provide="datepicker"> 
         <input type="text" ng-model="pickUp.pickUpDatepicker_1" class="form-control pickUpDatepicker_1"> 
         <div class="input-group-addon"> 
          <span class="glyphicon glyphicon-th"></span> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-2 p-l-0 border-dotted"> 
      <div class="input-group bootstrap-timepicker timepicker"> 
       <input type="text" ng-model="pickUp.pickUpTimePicker_1" class="form-control input-small pickUpTimePicker"> 
       <div class="input-group-addon"> 
        <span class="glyphicon glyphicon-time"></span> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-2 p-l-0 border-dotted"> 
      <div id="custom-search-input"> 
       <div class="input-group col-md-12 p-l-0"> 
        <input type="text" ng-model="pickUp.pickUpDescription_1" class="pickUpDescription_1 search-query form-control" placeholder="Description" /> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-2 p-l-0 border-dotted pick_div"> 
      <span class="pick_span"><a class="btn btn-success addMorePickUpLocations" ng-click="addMorePickUpLocations()" id="1"><i class="fa fa-plus" aria-hidden="true"></i></a></a></span> 
     </div> 
    </div> 
</div> 

これは、コントローラコード

$scope.pickUpItems = [{pickUpLocation_1: '', latitudePick_1: '', longitudePick_1:'', pickUpDatepicker_1:'' , pickUpTimePicker_1: '', pickUpDescription_1:''}]; 
$(".placepicker").placepicker(); 
$scope.addMorePickUpLocations = function(){ 
    $(".placepicker").placepicker(); 
    $scope.pickUpItems.push({ 
     pickUpLocation_1:"", 
     latitudePick_1:"", 
     longitudePick_1:"", 
     pickUpDatepicker_1:"", 
     pickUpTimePicker_1:"", 
     pickUpDescription_1:"" 
    }); 
}; 

しかし、緯度と経度が隠さに表示される場所をピックアップするための検索のオートコンプリートにを使用して繰り返しますテキストボックスには表示されませんが、ng-modelによってフェッチされません。これで私を助けてください。事前のおかげで

+0

HTMLコードをインストール

: <ボタンクラス= "BTN BTN-成功" タイプを= NGクリック= "提出(pickUpItems)" を "送信">フリートを作成します。 私のコントローラのコード: var fleetData = {}; $ scope.submit = function(){\t \t \t \t console.log(JSON.stringify($ scope.pickUpItems)); } $ scope.pickUpItems –

答えて

0

index.htmlを

<html> 
<head> 
<script data-require="[email protected]" data-semver="1.2.0-rc2" src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script> 
<script src="https://rawgithub.com/arunisrael/angularjs-geolocation/master/dist/angularjs-geolocation.min.js"></script> 
<script src="script.js"></script> 
</head> 
<body ng-app="myApp"> 
<div ng-controller="mainCtrl"> 
    <p>Your location is: {{coords}}</p> 
</div> 

コントローラコード

angular.module('myApp',['geolocation']) 
.controller('mainCtrl', function ($scope,geolocation) { 
$scope.coords = geolocation.getLocation().then(function(data){ 
    return {lat:data.coords.latitude, long:data.coords.longitude}; 
}); 

})。角度の地理の場所に保存するための

bower install angularjs-geolocation 
+0

のコードに現在の場所の座標を取得するために表示値を繰り返し表示するのを手伝ってください –

関連する問題