欢迎使用CSDN-markdown编辑器

来源:互联网 发布:js 判断对象是否存在 编辑:程序博客网 时间:2024/05/28 18:42

简单的请求网络数据,然后进行查询

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../angulatjs/angular-1.5.5/angular.min.js"></script>    <script>        var url1='https://free-api.heweather.com/v5/weather?city=';        var url3='&key=545d63e185fc48169a43cbabba6e74d2';        var myapp=angular.module("myapp",[]);        myapp.controller("myCtrl",function ($scope,$http) {            $scope.show=false;            $scope.btn=function () {                $scope.show=true;                var url2=$scope.city;                $http({                    url:url1+url2+url3                }).then(function (data) {                    $scope.data=data.data;                   $scope.cityname= $scope.data.HeWeather5[0];                })                $scope.city=""            }        });    </script></head><body ng-app="myapp" ng-controller="myCtrl">    <input type="text" ng-model="city"><button ng-click="btn()">查询</button><ul ng-show="show">    <li>        城市:{{cityname.basic.city}}<br>        日期:{{cityname.daily_forecast[0].date}}<br>        温度:{{cityname.daily_forecast[0].tmp.max}}-{{cityname.daily_forecast[0].tmp.min}}    </li></ul></body></html>

这里写图片描述

原创粉丝点击