HTMLからデータを表示するには、angularJS 1.6を使用してget get callを呼び出します。

httpコールの結果をコンソールに出力できますが、HTMLページで表示できるようにバインドするとできません。誰かがこれで私を助けることができますか？私は下にコントローラコードとhtmlを掲示しています。HTMLからデータを表示するには、angularJS 1.6を使用してget get callを呼び出します。

コントローラー・コード

  //module 
     var weatherApp = angular.module('weatherApp',['ngRoute' , 'ngResource']); 


     //Routes 
     //http://api.openweathermap.org/data/2.5/forecast/daily?APPID=metric 

     weatherApp.config(function ($routeProvider) { 

      $routeProvider 
      .when('/', { 
       templateUrl:'pages/home.htm', 
       controller:'homeController' 
      }) 
      .when('/forecast', { 
       templateUrl:'pages/forecast.htm', 
       controller:'forecastController' 
      }); 
     }); 

     //services 
     weatherApp.service('cityService' ,function() { 
      this.city ="San Jose, CA"; 
     }); 


     //controllers 
     weatherApp.controller('homeController' ,['$scope', 'cityService', function($scope , cityService) { 

      $scope.city = cityService.city; 
      $scope.$watch('city' , function() { 
      cityService.city = $scope.city; 
      }); 
     }]); 

      $scope.city = cityService.city; 
    console.log($scope.city); 
    $http({ 
     url: "http://api.openweathermap.org/data/2.5/forecast/daily?APPID==metric", 
     method: "GET", 
     params: {q: $scope.city, cnt:2} 
    }).then(function(response){ 
     $scope.weatherResults = response.data; 
     console.log($scope.weatherResults); 
    }); 

}]);

のIndex.htm

用HTML CODE

<!DOCTYPE html> 
<html lang="en" ng-app="weatherApp"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/navbar.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.min.js"></script> 
    <script src="app.js"></script> 
</head> 
<body> 
    <!-- NAVBAR --> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
     <a class="navbar-brand" href="#">Accurate Weather</a> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Home</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
<!-- NAVBAR ENDS--> 

<div class="container"> 
    <div ng-view></div> 
</div> 

</body> 
</html>

Forecast.html

のコード

Forecast for {{city}} <!-- THIS WORKS --> 

{{ weatherResult.cnt }} <!-- THIS DOES NOT WORK -->

home.htmのコード（すべてがJUST投稿するHERE正常に動作します鮮明に保つため）

<div class = "row"> 
    <div class = "col-md-6 col-md-offset-3"> 
    <h4>Forecast by city</h4> 
    <div class="form-group"> 
     <input type="text" ng-model="city" class="form-control" /> 
    </div> 
     <a href="/weatherApp/index.htm#!/forecast" class="btn btn-primary">Get forecast </a> 
    </div> 
</div>

console output correctly displays the objects:

出典

2017-01-19 Nipun Ahuja

これはむしろ不明です。意図したとおりに正確に動作していないものを明確にすることはできますか？ –

上記のhtmlコードがコントローラにあることを確認してください –

あなたのコントローラを投稿したり、フィドルを共有できますか？ – Dario

AngularJSが正しくそれを見ることができるように多分あなたのコントローラ内の空のオブジェクトとして$scope.weatherResultを試してみて、初期化します。ただ、gigestサイクルを確認する追加することも正しく

$scope.$apply(function() { 
    $scope.weatherResult = response.data; //IF I LOG THIS IT WORKS 
});

良い処理されるべきであるようにデータを非同期に変更した角度のエンジンに通知するために$scope.apply内のこの割り当てを入れ

出典

2017-01-19 10:56:20 Ripley511

こんにちは、投稿を編集し、コード全体を追加しました。私はあなたが示唆したことを試しましたが、残念ながらそれは動作していないようです。他に何か提案できますか？ –

は現在進行中で

if(!$scope.$$phase) { 
    //$digest or $apply 
}

ではありません

出典

2017-01-19 11:01:06 VadimB

このコードは実行されますか？おそらく、コンソールのインライン角度エラーがありますか？あなたは、割り当て後に 'weatherResult'を印刷するためにapplyのconsole.logを直接追加できますか？それは正しい値を印刷しますか？ – VadimB

こんにちはVladimB、このコードから紛失している唯一のものは、安全上の理由から削除したので、私が取得リクエストを行うURLからの私のAppIdです。はい、私はconsole.logそれは、私は絶対に正しい値を取得します。 –

Angularの組み込み双方向データ・バインディングは、既知の問題であるhttp応答では機能しません。 $timeoutを使用して、手動で2方向データバインドを開始し、ダイジェストサイクルを開始します。

$scope.getWeather= function(){ 
    $http({ 
     url: "http://api.openweathermap.org/data/2.5/forecast/daily?AP&units=metric", 
     method: "GET", 
     params: {q: $scope.city, cnt:2} 
}) 
    .then(function(response){ 
      $timeout(function(){ 
      $scope.weatherResult = response.data; 
      }, 0); 

    }); 
} 
}]);

注$timeoutタイマは、直ちにダイジェストサイクルで蹴りは0msに設定されています。

出典

2017-01-19 11:02:48

正しいコードが掲載されています。私は$ scope.variableにhttp getコールを割り当てていましたが、私はそれを削除して作業を開始しました。ありがとう

出典

2017-01-21 09:14:28

HTMLからデータを表示するには、angularJS 1.6を使用してget get callを呼び出します。

答えて

関連する問題