angular+查天气预报

html>
<html>
<head>
    <meta charset="utf-8">
    <script src="angular/angular.js">script>
head>
<body ng-app="myApp" ng-controller="siteCtrl"><div >
    <input type="text" ng-model="city2" value="beijing">
    <button ng-click="check()">btnbutton>
    <p>未来3天的天气情况p><ul ng-show="toggle">
    <li>
        {{city.basic.city}};<span>跟新时间:{{city.basic.update.loc}}span>
        <p>气温:{{city.now.tmp}}degp>
        <p>wind:{{city.now.wind.dir}}p>
    li>
ul>
div>

<script>
    var url1='https://free-api.heweather.com/v5/weather?city=';
    var url3='&key=545d63e185fc48169a43cbabba6e74d2';
    var app = angular.module('myApp', []);
    app.controller('siteCtrl', function($scope, $http) {
        $scope.toggle=false;
        $scope.check=function(){
            $scope.toggle=true;
            var url2=$scope.city2;
            $http({
                url:url1+url2+url3
            }).then(function(data){
                console.log(data.data);
                $scope.data=data.data;
                $scope.city=$scope.data.HeWeather5[0];
            });
        };
    });
script>body>
html>

你可能感兴趣的:(html5)