2016-08-19 53 views
0

您好我正在使用Ionic框架。我有一个关于使用push和ng-repeat元素绑定JS元素的问题。我没有看到HTML上的绑定值,不知道这是否是正确的实现方式。绑定元素使用ng-repeat和角度推服务

此应用程序的概念: 若要使用Google将JS的搜索API用于查找设备位置附近的商店并在html页面上显示商店的名称和地址。 HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 
    <title></title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <script src="lib/ionic/js/ionic.bundle.js"></script> 
    <!-- remember to add your Google Maps API key! --> 
     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> 
    <script src="cordova.js"></script> 
    <script src="lib/ngCordova/dist/ng-cordova.js"></script> 
    <script src="js/app.js"></script> 
    </head> 
    <body ng-app="app" ng-controller="LocationCtrl"> 

    <ion-pane> 
     <ion-header-bar class="bar-stable"> 
     <h1 class="title">My Location</h1> 
     </ion-header-bar> 
     <ion-content scroll="false"> 

     <div class="list card"> 
      <div class="item item-input"> 
       Result: 
       <div ng-repeat="result in db"> 
        {{result.name}},{{result.formatted_address}}</div></div> 
      <div class="item item-input"> 
      <span class="input-label">Coordinates:</span> 
      {{coords.latitude}}, {{coords.longitude}} 
      </div> 
     </div> 
     <div id="map"></div> 

     </ion-content> 
    </ion-pane> 
    </body> 
</html> 

JS:

app.controller('LocationCtrl', function($scope, $cordovaGeolocation, $ionicPlatform) { 

    $scope.db = []; 
    var map; 
    var infowindow; 
function showMap() { 

     var pyromont = { lat: -33.867, lng: 151.195}; 

     map = new google.maps.Map(document.getElementById('map'),{ 
      center: pyromont, 
      zoom: 12 
      });  
     var request = { 
    location: pyromont, 
    radius: 500, 
    type: ['store'] 
    }; 
var service = new google.maps.places.PlacesService(map); 
    service.textSearch(request, callback); 
    }; 


     function callback(result, status) { 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
      $scope.db.push(result); 
      console.log($scope.db); 
     } 
}; 
}) 

所以你可以看到这里的JS代码,当我尝试从结果推阵列值数据库,并与NG重复的HTML,当我尝试读取绑定值时,我无法读取任何结果。但是在记录数据库的值时,我在控制台窗口中看到一个包含20个变量的数组,当我在chrome开发人员工具上看到的时候,我正是从placesservice.js中得到的。 我不确定是什么问题,请看看,让我知道如果我错过了包括任何参数/服务。期待听取您的意见。 问候 苏雷什

回答

0

尝试使用此

$scope.db.push.apply($scope.db, result); 
+0

虽然此代码段可以解决的问题,[包括一个解释](// meta.stackexchange.com/questions/114762/explaining-entirely-code-基于问题的答案)确实有助于提高帖子的质量。请记住,您将来会为读者回答问题,而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性注释来挤占代码,这会降低代码和解释的可读性! – kayess