Angular实现的简单查询天气预报功能示例


Posted in Javascript onDecember 27, 2017

本文实例讲述了Angular实现的简单查询天气预报功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

Angular实现的简单查询天气预报功能示例

具体代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="siteCtrl">
<div >
  <input type="text" ng-model="city2" value="beijing">
  <button ng-click="check()">btn</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>
</div>
<script>
  var url1='https://free-api.heweather.com/v5/weather?city=';
  var url3='&key=545d63e185fc48169a43cbabba6e74d2';
  var app = angular.module('myApp', []);
  app.controller('siteCtrl', 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>
</body>
</html>

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 #Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 #Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 #Javascript
简单的Vue异步组件实例Demo
Dec 27 #Javascript
Vue.js组件间的循环引用方法示例
Dec 27 #Javascript
全面介绍vue 全家桶和项目实例
Dec 27 #Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 #jQuery
You might like
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
php的常量和变量实例详解
2017/06/27 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
详解vue 数组和对象渲染问题
2018/09/21 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
python获取本机外网ip的方法
2015/04/15 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Python3实现定时任务的四种方式
2019/06/03 Python
python编写简单端口扫描器
2019/09/04 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
摄影实习自我鉴定
2013/09/20 职场文书
网吧收银员岗位职责
2013/12/14 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
2015年药房工作总结
2015/04/25 职场文书
庆祝教师节主持词
2015/07/06 职场文书