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 { //获得输入框内容 ...
随机推荐
- Android设置EditText不可编辑
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/224 禁用EditText 这个其实很简单,最简单的一种方 ...
- LL(1)文法的判断，递归下降分析程序
1. 文法 G(S): (1)S -> AB (2)A ->Da | ε (3)B -> cC (4)C -> aADC | ε (5)D -> b | ε 验证文法 G ...
- python爬虫学习心得：中国大学排名(附代码)
今天下午花时间学习了python爬虫的中国大学排名实例,颇有心得,于是在博客园与各位分享 首先直接搬代码: import requests from bs4 import BeautifulSoup ...
- C# 使用.net core 驱动树莓派的IO信号
如何使用.net core来驱动树莓派的IO信号?是我们的实际项目需求中,可能就会有这种小项目,我们要输出一个IO信号,此处我们拿了树莓派4做测试 一共有两排引脚,引脚的顺序定义及功能如下: 我们就参 ...
- 当Python遇上AI（一）
Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.什么是学习 如果要给学习下一个定义,那么根据某百科给出的定义是——学习,是指通过阅读.听讲.思考和实践等途径获 ...
- [Go] 轻量服务器框架全局配置的实现以及解析json
在一个应用中经常需要有一个配置文件,可以对代码中的参数进行配置,可以使用一个json文件来对应一个struct的对象,进行全局配置 建一个conf/zinx.json作为配置文件 { "Na ...
- Win10锁屏壁纸位置
C:\Users\MIS\AppData\Local\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\LocalStat ...
- Cocos2d-x3.0网络通信学习（一）
配置:win7+Cocos2d-x.3.0+VS2012 摘要:建立基本的http通信并得到返回信息. 一.添加项目与编译库 1.添加头文件 在需要用到Http网络相关类的文件中加入头文件 #incl ...
- spring boot 2.2.0开始freemarker模板默认扩展名改为ftlh了
2.2.0这个版本刚发布的时候更新到了这个版本,然后使用freemarker 的webapp运行报错. 查了spring boot的changelog,搜freemarker查到了这条.ftlh,使f ...
- springboot 多环境
springboot 多环境 --spring.profiles.active=dev 查看 Ioc 容器 PostProcessorRegistrationDelegate