<!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. 域控权限提升PTH攻击

    0x01 漏洞利用条件 1.被pth攻击的计算机未打补丁(KB2871997)2.拿到一台域成员主机并且拿到管理员组的域用户的NTML 3.对方主机存在相同账号并且是管理员组成员 0x02 本地用户N ...

  2. Samba CVE-2017-7494验证实验

    漏洞简介 Samba是在Linux和UNIX系统上实现SMB协议的一个软件,不少IoT设备也使用了Samba.2017年5月24日Samba发布了4.6.4版本,修复了一个严重的远程代码执行漏洞,漏洞 ...

  3. Python中删除空白字符

    主要参考 Stackoverflow答案总结. 空白字符一般指以下几种字符: space,tab, linefeed, return, formfeed, and vertical tab中英文对照表 ...

  4. Jmeter中使用HTTP信息头管理器发送json格式请求体的接口

    Jmeter中,如果请求体的格式为x-www-form-urlencoded,则不需要添加请求头,保持默认即可,但是如果遇到接口的请求体格式为json时,就要用到HTTP信息头管理器,在线程组上右键— ...

  5. SpringBoot系列——Jackson序列化

    前言 Spring Boot提供了与三个JSON映射库的集成: Gson Jackson JSON-B Jackson是首选的默认库. 官网介绍: https://docs.spring.io/spr ...

  6. Checkedlistbox只能单选不能多选

    private void Checkedlistbox_ItemCheck(object sender, ItemCheckEventArgs e) { ; i < chkCountry.Ite ...

  7. C# - VS2019 WinFrm应用程序调用WebService服务

    WinFrm应用程序调用WebService服务 关于WebService的创建.发布与部署等相关操作不再赘述,传送门如下:C# VS2019 WebService创建与发布,并部署到Windows ...

  8. 【js】canvas——Atomic-particle-motion

    原子粒动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  9. leaflet 结合 Echarts4 实现散点图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  10. RMAN命令详解和常用汇总

    RMAN命令详解和常用汇总转摘汇集,日后使用本文链接:https://blog.csdn.net/EVISWANG/article/details/50448370http://blog.itpub. ...