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 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
Jquery 学习笔记(一)
Oct 13 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
vue-swiper的使用教程
Aug 30 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 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下读取文本文件的代码
2008/07/02 PHP
php实现中文转数字
2016/02/18 PHP
PHP文件操作详解
2016/12/30 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
php中错误处理操作实例分析
2019/08/23 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
python图像处理之镜像实现方法
2015/05/30 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
python实现汽车管理系统
2018/11/30 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
Django封装交互接口代码
2020/07/12 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
大学毕业生个人自荐信范文
2014/01/08 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python