angular之寻找数据

最新推荐文章于 2024-06-03 10:06:40 发布

SackJe_13

最新推荐文章于 2024-06-03 10:06:40 发布

阅读量231

点赞数

分类专栏：移动互联

本文链接：https://blog.csdn.net/Sakeji_13/article/details/78300973

版权

移动互联专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title></title>
    <script type="text/javascript">
        var app = angular.module("myApp", []);

        app.value("URL", "https://free-api.heweather.com/v5/weather?city=beijing&key=545d63e185fc48169a43cbabba6e74d2");

        app.factory("weather", function ($http, $q, URL) {
            return function () {
                return $http.get(URL).then(function (response) {
                    var data = response.data.HeWeather5[0];

                    var weather = {city: data.basic.city, txt: data.now.cond.txt, day3: [], hour4: []};

                    for (var i in data.daily_forecast) {
                        weather.day3.push({
                            date: data.daily_forecast[i].date,
                            txt: data.daily_forecast[i].cond.txt_d
                        });
                    }

                    for (var i in data.hourly_forecast) {
                        weather.hour4.push({
                            time: data.hourly_forecast[i].date,
                            txt: data.hourly_forecast[i].cond.txt
                        });
                    }

                    return weather;
                }, function (response) {
                    return $q.reject(response.status);
                });
            }
        });

        app.controller("myCtrl", function ($scope, weather) {
            weather().then(function (weather) {
                $scope.weather = weather;
            }, function (status) {
                console.log(status);
            });
        });
    </script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
    <div>
        城市：<i>{{ weather.city }}</i>
    </div>
    <div>
        天气：<i>{{ weather.txt }}</i>
    </div>
    <div>未来3天天气：</div>
    <table border="1">
        <tr>
            <th>日期</th>
            <th>天气</th>
        </tr>
        <tbody ng-repeat="value in weather.day3">
        <tr>
            <td>{{ value.date }}</td>
            <td>{{ value.txt }}</td>
        </tr>
        </tbody>
    </table>
    <div>未来几小时天气：</div>
    <table border="1">
        <tr>
            <th>时间</th>
            <th>天气</th>
        </tr>
        <tbody ng-repeat="value in weather.hour4">
        <tr>
            <td>{{ value.time }}</td>
            <td>{{ value.txt }}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

SackJe_13

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular之寻找数据

var app = angular.module("myApp", []); app.value("URL", "https://free-api.heweather.com/v5/weather?city=beijing&key=545d63e185fc48169a43cbabba6e74d2"); app.factory("weather", functio
复制链接

扫一扫

专栏目录