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 相关文章推荐
jQuery学习笔记之总体架构
Jun 03 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
AJAX学习笔记
May 18 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
php GeoIP的使用教程
2011/03/09 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
php目录拷贝实现方法
2015/07/10 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
Python单链表的简单实现方法
2014/09/23 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
行政助理岗位职责
2013/11/10 职场文书
施工安全汇报材料
2014/08/17 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
城南旧事观后感
2015/06/11 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS