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 { //获得输入框内容 ...
随机推荐
- VS2019 开发Django（六）------Admin中图片上传
导航:VS2019开发Django系列 该篇继续完善在Django的管理界面上传图片,因为LazyOrders小程序中菜单需要展示图片,而不是一个文本路径,所以我们还需要继续改造一下. 1)安装pil ...
- Java连载61-异常的机制与分类
一.is a.is like a.has a 1.is a(就是继承) public class Animal{ public void method1{ } } public class Dog e ...
- Hook Java API以获得MD5加密前数据
Java实现MD5加密 在Java中,我们用MD5对数据进行加密,代码大概是这样的: import java.security.MessageDigest; import java.security. ...
- python中time.strftime不支持中文，报错UnicodeEncodeError: 'locale' codec can't encode character '\u5e74' in position 2: encoding error
使用time.strftime将 "2020-10-10 10:10:10" 转化为 2020年10月10日10时10分10 报错: import time timestr=&q ...
- 对python函数后面有多个括号的理解？
一般而言,函数后面只有一个括号.如果看见括号后还有一个括号,说明第一个函数返回了一个函数,如果后面还有括号,说明前面那个也返回了一个函数.以此类推. 比如fun()() def fun(): prin ...
- centos7下安装客户端rabbitmq9.0
下载目前最新rabbitmq客户端版本: wget https://github.com/alanxz/rabbitmq-c/archive/v0.9.0.tar.gz php扩展 : wget ht ...
- Laravel Validator
Controller use Validator; public function Validators(){ $rules = [ 'title' => 'required|max:255', ...
- socket互传对象以及IO流的顺序问题
UserInfo.java package com.company.s6; import java.io.Serializable; public class UserInfo implements ...
- SAP IDOC 通过采购订单输出消息生成销售订单
题记: 在网络上看到一篇类似的公众号文章,叫<通过IDoc逐步指导PO&SO集成>,个人觉得整个配置过程中还是少了一些重点配置,也少了说明整个功能的核心逻辑,那么,趁着这个机会,就 ...
- Netfilter，获取http明文用户名和密码
目录 Netfilter简介 实验-target端 内核模块的操作 初始化netfilter 解析http包,获取用户名和密码 实验-hack端 遇到的问题 @ Netfilter简介 Netfilt ...