<!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. Win10系统重做

    一.准备工作: 1.电脑(台式电脑.笔记本电脑): 2.U盘(内存大于4G): 3.软碟通(UltraISO):下载地址:https://pan.baidu.com/s/1tpCiIyIwK_7LaL ...

  2. leetcode菜鸡斗智斗勇系列(2)--- 把一个ipv4地址转换成一串数字

    1.原题: https://leetcode.com/problems/defanging-an-ip-address/ 这道题本身很简单, Given a valid (IPv4) IP addre ...

  3. .NET Core和无服务器框架

    无服务器框架是一个云提供商无关的工具包,旨在帮助构建,管理和部署无服务器组件的操作,以实现完整的无服务器架构或不同功能即服务(FaaS).无服务器框架的主要目标是为开发人员提供一个界面,该界面抽象出云 ...

  4. 带你揭秘Shiro(二)

    授权流程 1.对subject进行授权,调用方法isPermitted("permission串") 2.SecurityManager执行授权,通过ModularRealmAut ...

  5. Linux查看哪些进程占用的系统 buffer/cache 较高 (hcache,lsof)命令

    原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接:https://app.yinxiang.com/shard/s17/nl/19391737/9652651a-7 ...

  6. 使用pycharm或idea提交项目到github

    pycharm和idea的操作方式几乎一样,所以下面就以pycharm为例来介绍. 安装git https://git-scm.com/download/win 官网,下载慢,需翻墙 https:// ...

  7. 如何在 Chrome中导出、导入书签和密码

    目录 书签 密码 书签 1.导出 点击浏览器右上角的三小点,选择"书签",再选择"书签管理器",进入如下页面 点击蓝色书签栏右上角的三小点,选择"导出 ...

  8. 内存取证工具-volatility、foremost

    内存取证 1. 内存取证工具volatility 猜测dump文件的profile值 root@kali:~/CTF# volatility -f mem.vmem imageinfo Volatil ...

  9. Mysql 事务及其原理

    Mysql 事务及其原理 什么是事务 什么是事务?事务是作为单个逻辑工作单元执行的一系列操作,通俗易懂的说就是一组原子性的 SQL 查询.Mysql 中事务的支持在存储引擎层,MyISAM 存储引擎不 ...

  10. windows系统下压缩文件成tar.gz格式的方法

    tar.gz 是linux和unix下面比较常用的格式,几个命令就可以把文件压缩打包成tar.gz格式,然而这种格式在windows并不多见,WinRAR.WinZip等主流压缩工具可以释放解开,却不 ...