<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="../../AngularJS/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.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>

 </head>

 <body ng-app="myapp" ng-controller="myCtrl">

     <input type="text" ng-model="city2" value="beijing">

     <button ng-click="check()">获取天气</button>

     <p>未来3天的天气情况</p>

     <ul ng-show="toggle">

         <li>

             {{city.basic.city}};<span>更新的时间:{{city.basic.update.loc}}</span>

             <p>气温:{{city.now.tmp}}deg</p>

             <p>wind:{{city.now.wind.dir}}</p>

         </li>

     </ul>

 </body>

 </html>

angularjs $http请求网络数据并展示的更多相关文章

  1. Android 手机卫士--构建服务端json、请求网络数据

    本文地址:http://www.cnblogs.com/wuyudong/p/5900384.html,转载请注明源地址. 数据的传递 客户端:发送http请求 http://www.oxx.com/ ...

  2. Android - 使用Volley请求网络数据

    Android - 使用Volley请求网络数据 Android L : Android Studio 14 个人使用volley的小记,简述使用方法,不涉及volley源码 准备工作 导入Volle ...

  3. react-native 项目实战 -- 新闻客户端（4） -- 请求网络数据

    1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Te ...

  4. HttpURLConnection请求网络数据的Post请求

    //--------全局变量----------- //注册Url    private String urlPath="http://101.200.142.201:8080/VideoP ...

  5. ListView获取网络数据并展示优化练习

    权限: <uses-permission android:name="android.permission.INTERNET"></uses-permission ...

  6. HttpURLConnection请求网络数据

    //使用线程 new Thread(){            public void run() {                try {                    //先创建出了一 ...

  7. IOS开发中使用AFNetworking请求网络数据

    1.把AFNetworking的文件拖放到项目中(注意不同的版本方法不一样,本历程基于版本2013): 2.使用#import "AFNetworking.h"命令把AFNetwo ...

  8. post NSURLConnection请求网络数据

    #import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...

  9. HttpClient请求网络数据的Post请求

    new Thread(){            public void run() {                                try { //获得输入框内容          ...

随机推荐

  1. Java面试题_第四阶段

    1.1 电商行业特点 1.分布式 垂直拆分:根据功能模块进行拆分 水平拆分:根据业务层级进行拆分 2.高并发 用户单位时间内访问服务器数量,是电商行业中面临的主要问题 3.集群 抗击高兵发的有效手段, ...

  2. 可编程实验板EPM1270T144C5蜂鸣器音调频率选择

    always@(tone) begin case(tone) 'd1 : time_end=10'd1911 ;//L1 'd2 : time_end=10'd1702 ;//L2 'd3 : tim ...

  3. 周末DHU友谊赛(半日游)感想

    DHU的校园挺好的啊,感觉教学楼啊,整体环境啊比咱学校好上一些,和大家一起出来有些春(冬)游的意味,食堂也是十分的宽敞,座位好多! 吐槽shu的食堂座位到饭点明显太少,食堂品类好多,shu的吃多了感觉 ...

  4. Jmeter工具使用初体验

    一.Jmeter组成部分 一个完整的脚本必须包含以下三项,他们都在测试计划的子选项中,我们直接在测试计划上右键选择即可 线程组 取样器 监视器 二.脚本编写 1.创建线程组 2.添加取样器 我们这里添 ...

  5. C# -- 使用ODBC连接数据库

    C# -- 使用ODBC连接数据库 public class ODBCHelper { public static string conString1 = "Dsn=sqlServerDsn ...

  6. Angular常用VSCode插件

    1.Angular 8 Snippets(全家桶) 2.TSLint(ts代码规范.错误提示) 3.Material Icon Theme(文件图标) 4.One Dark Pro(主题) 5.Ang ...

  7. Java并发面试问题，谈谈你对AQS的理解

    本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...

  8. Java中的日期与时间

    日期与时间 最常用的几个类,Date.DateFormat.Calendar.Locale Date 1.无参构造方法 //根据当前系统默认的毫秒值创建时间对象 public Date() { thi ...

  9. 如何快速找到多个字典中的公共键(key)

    from random import randint, sample #sample随机取样 d1 = {k: randint(1, 4) for k in sample('abcdefgh', ra ...

  10. VUE组件 之 高德地图地址选择

    注:本文基于上一篇文章[ Vue-Cli 3.0 中配置高德地图] ,采用直接引入高德 SDK 的方式来使用高德地图api 一.效果图 二.组件要实现的功能 1. 如果有传入坐标点,则定位到坐标点 2 ...