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 { //获得输入框内容 ...
随机推荐
- 解决“fatal: 'origin' does not appear to be a git repository...”
当使用Git进行代码push提交时,出现报错信息“fatal: 'origin' does not appear to be a git repository...”, $ git push -u o ...
- 【Linux 命令】cp 命令详解
Linux 命令之 cp 命令详解 一.cp 命令简介 cp 命令主要用于复制文件或目录.即用来将一个或多个源文件或者目录复制到指定的目的文件或目录. cp 命令可以将单个源文件复制成一个指定文件名的 ...
- Sublime Merge真正的Git客户端
Sublime Merge好用吗?借助功能强大的跨平台UI工具包,无与伦比的语法高亮引擎和自定义高性能Git读取库,Sublime Merge为性能设定了标准.所有内容都是可扩展的.键绑定,菜单,主题 ...
- 关于使用DB2数据库的项目后台报-420错误码的问题
### Error querying database. Cause: com.ibm.db2.jcc.am.SqlDataException: DB2 SQL Error: SQLCODE=-4 ...
- Dubbo学习笔记-RPC扩展和本地Mock
1.Dubbo介绍 Dubbo,一个是一款高性能Java RPC框架.私以为有中文官方文档,就不再重复介绍了 2.RPC扩展-本地存根stub RPC扩展功能:提前效验参数,缓存调用结果,日志记录等等 ...
- Docker安全扫描工具之docker-bench-security
简介 Docker Bench for Security检查关于在生产环境中部署Docker容器的几十个常见最佳实践.这些测试都是自动化的,其灵感来自CIS Docker基准1.2.0版. 这种安全扫 ...
- Excel映射到实体-easyexcel工具
来源 项目需要把Excel进行解析,并映射到对象属性,实现类似Mybatis的ORM的效果.使用的方式是自定义注解+POI,这种方式代码复杂而且不易于维护. easyexcel是阿里巴巴开源的一个框架 ...
- 微信支付 第三篇 微信调用H5页面进行支付
上一篇讲到拿到了 预支付交易标识 wx251xxxxxxxxxxxxxxxxxxxxxxxxxxxxx078700 第四步,是时候微信内H5调起支付了! 先准备网页端接口请求参数列表 微信文档中已经明 ...
- Logo（图片）作为报表水印的解决方法
概述 在<像 word 一样增加水印功能>中,已经介绍了如何在润乾报表中增加文字水印功能,包括了静态及动态水印.水印功能将标识信息嵌入到报表载体后,使得信息安全.版权保护有了更有效的方法. ...
- VUE,基于vue-cli搭建创建vue项目
前提:必须安装node.js,官方地址:https://nodejs.org/en/ 然后安装vue-cli 安装方式:cmd命令行安装:打开cmd命令符输入进行全局安装脚手架:npm install ...