<!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. 【30天自制操作系统】day04：C语言与目前执行流程图

    用 C 语言直接写入内存 原来依靠汇编 void io_hlt(void); void write_mem8(int addr, int data); void HariMain(void){ int ...

  2. Hadoop入门学习笔记总结系列文章导航

    一.为何要学习Hadoop? 这是一个信息爆炸的时代.经过数十年的积累,很多企业都聚集了大量的数据.这些数据也是企业的核心财富之一,怎样从累积的数据里寻找价值,变废为宝炼数成金成为当务之急.但数据增长 ...

  3. canvas的介绍

    1.我们前端的绘图技术有哪些: 统计图表:echarts 实时走势图:canvas: 在线画板:魔猴: HTML5游戏:three.js 2.我这里主要讲的是canvas绘图: <canvas& ...

  4. Graylog 笔记

    安装 基本上有3种方式,1 yum安装2 rpm安装3 docker安装 yum安装 yum安装,参照官方文档是最好的:http://docs.graylog.org/en/3.0/pages/ins ...

  5. Python第一个程序Hello Word

    [源代码] print('Hello Python World!') [过程] 打开命令提示窗口(cmd),在源程序所在路径下执行,python 文件名.py. [截图]

  6. CSS之border绘制三角形

    用CSS的border可以画出高质量的三角形. 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px a ...

  7. Android Studio 3.0+ Record Espresso Test 自动化测试

    准备工作 1.将android studio 版本升级到3.0+2.百度下载夜神模拟器 夜神模拟器的基本设置 PS:以上就是夜神模拟器的基本设置 Android Studio 连接夜神模拟器 //夜神 ...

  8. LeetCode刷题191121

    博主渣渣一枚,刷刷leetcode给自己瞅瞅,大神们由更好方法还望不吝赐教.题目及解法来自于力扣(LeetCode),传送门. 数据库: 编写一个 SQL 查询,来删除 Person 表中所有重复的电 ...

  9. 千万级数据迁移工具DataX实践和geom类型扩展

    ## DataX快速入门参考 > 官方https://github.com/alibaba/DataX/blob/master/userGuid.md ## 环境要求 > Linux JD ...

  10. 阿里云搭建wordpress博客教程

    一 :搭建环境 1.安装Apache环境 在线安装Apache yum install httpd 启动Apache服务 service httpd start 设置开机自启动 chkconfig h ...