angularjs $http请求网络数据并展示
<!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请求网络数据并展示的更多相关文章
- Android 手机卫士--构建服务端json、请求网络数据
本文地址:http://www.cnblogs.com/wuyudong/p/5900384.html,转载请注明源地址. 数据的传递 客户端:发送http请求 http://www.oxx.com/ ...
- Android - 使用Volley请求网络数据
Android - 使用Volley请求网络数据 Android L : Android Studio 14 个人使用volley的小记,简述使用方法,不涉及volley源码 准备工作 导入Volle ...
- react-native 项目实战 -- 新闻客户端（4） -- 请求网络数据
1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Te ...
- HttpURLConnection请求网络数据的Post请求
//--------全局变量----------- //注册Url private String urlPath="http://101.200.142.201:8080/VideoP ...
- ListView获取网络数据并展示优化练习
权限: <uses-permission android:name="android.permission.INTERNET"></uses-permission ...
- HttpURLConnection请求网络数据
//使用线程 new Thread(){ public void run() { try { //先创建出了一 ...
- IOS开发中使用AFNetworking请求网络数据
1.把AFNetworking的文件拖放到项目中(注意不同的版本方法不一样,本历程基于版本2013): 2.使用#import "AFNetworking.h"命令把AFNetwo ...
- post NSURLConnection请求网络数据
#import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...
- HttpClient请求网络数据的Post请求
new Thread(){ public void run() { try { //获得输入框内容 ...
随机推荐
- Win10系统重做
一.准备工作: 1.电脑(台式电脑.笔记本电脑): 2.U盘(内存大于4G): 3.软碟通(UltraISO):下载地址:https://pan.baidu.com/s/1tpCiIyIwK_7LaL ...
- leetcode菜鸡斗智斗勇系列（2）--- 把一个ipv4地址转换成一串数字
1.原题: https://leetcode.com/problems/defanging-an-ip-address/ 这道题本身很简单, Given a valid (IPv4) IP addre ...
- .NET Core和无服务器框架
无服务器框架是一个云提供商无关的工具包,旨在帮助构建,管理和部署无服务器组件的操作,以实现完整的无服务器架构或不同功能即服务(FaaS).无服务器框架的主要目标是为开发人员提供一个界面,该界面抽象出云 ...
- 带你揭秘Shiro（二）
授权流程 1.对subject进行授权,调用方法isPermitted("permission串") 2.SecurityManager执行授权,通过ModularRealmAut ...
- Linux查看哪些进程占用的系统 buffer/cache 较高 (hcache，lsof）命令
原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接:https://app.yinxiang.com/shard/s17/nl/19391737/9652651a-7 ...
- 使用pycharm或idea提交项目到github
pycharm和idea的操作方式几乎一样,所以下面就以pycharm为例来介绍. 安装git https://git-scm.com/download/win 官网,下载慢,需翻墙 https:// ...
- 如何在 Chrome中导出、导入书签和密码
目录 书签 密码 书签 1.导出 点击浏览器右上角的三小点,选择"书签",再选择"书签管理器",进入如下页面 点击蓝色书签栏右上角的三小点,选择"导出 ...
- 内存取证工具-volatility、foremost
内存取证 1. 内存取证工具volatility 猜测dump文件的profile值 root@kali:~/CTF# volatility -f mem.vmem imageinfo Volatil ...
- Mysql 事务及其原理
Mysql 事务及其原理 什么是事务 什么是事务?事务是作为单个逻辑工作单元执行的一系列操作,通俗易懂的说就是一组原子性的 SQL 查询.Mysql 中事务的支持在存储引擎层,MyISAM 存储引擎不 ...
- windows系统下压缩文件成tar.gz格式的方法
tar.gz 是linux和unix下面比较常用的格式,几个命令就可以把文件压缩打包成tar.gz格式,然而这种格式在windows并不多见,WinRAR.WinZip等主流压缩工具可以释放解开,却不 ...