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 相关文章推荐
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
一个选择最快的服务器转向代码
Apr 27 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 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
我的群发邮件程序
2006/10/09 PHP
php仿ZOL分页类代码
2008/10/02 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
浅述python中深浅拷贝原理
2018/09/18 Python
Python按钮的响应事件详解
2019/03/04 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
产品工艺师的岗位职责
2013/11/15 职场文书
高中英语教学反思
2014/02/04 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
化工操作工岗位职责
2014/04/29 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
大学生个人求职信例文
2014/07/07 职场文书
关键在于落实心得体会
2014/09/03 职场文书
小兵张嘎观后感
2015/06/03 职场文书
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL