angularjs实现天气预报功能
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天气</title> <script src="../angular-1.5.5/angular.min.js"></script> <script> var u1="https://free-api.heweather.com/v5/weather?city="; var u2; var u3="&key=545d63e185fc48169a43cbabba6e74d2"; var my=angular.module("my",[]); my.controller("mys",function ($scope,$http) { $scope.city="beijing"; $scope.show=false; $scope.search=function () { u2=$scope.city; $scope.show=true; $http({ url:u1+u2+u3 }).then(function (data) { $scope.cityName=data.data.HeWeather5[0].basic.city; $scope.date=data.data.HeWeather5[0].daily_forecast[0].date; $scope.mTemp=data.data.HeWeather5[0].daily_forecast[0].tmp.max; $scope.xTemp=data.data.HeWeather5[0].daily_forecast[0].tmp.min; }) $scope.city=""; }; }) </script> </head> <body ng-app="my" ng-controller="mys"> <input type="text" ng-model="city"/><button ng-click="search()">点击查询</button> <ul ng-show="show"> <li>{{cityName}}</li> <li>{{date}}</li> <li>{{mTemp}}</li> <li>{{xTemp}}</li> </ul> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
AngularJs 弹出模态框(model)
推荐阅读:详解AngularJS 模态对话框 $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们. $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScope controller:为$modal指定的控制器,初始化$scope,该控制器可用$modalInstance注入 res
-
angular4实现tab栏切换的方法示例
管理系统 tab 切换页,是一种常见的需求,大概如下: 点击左边菜单,右边显示相应的选项卡,然后不同的选项卡面可以同时编辑,切换时信息不掉失! 用php或.net,java的开发技术,大概是切换显示,然后加一个ifram来做到,或者通过ajax加载信息显示相应的层. 但是如果用angular 要如何实现呢?第一个想法,是否可以用同样的ifarm来实现呢? 第二个想到的是路由插座大概是这样的 复制代码 代码如下: <router-outlet name="main-content"
-
AngularJS实现表单验证
虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始 复制代码 代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate> <p&
-
Angularjs制作简单的路由功能demo
从官网下载了最新版本的Angularjs 版本号:1.3.15 做一个简单的路由功能demo 首页:index.html <!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>测试</title> <script src="./js/angular.min.js"></script> <scri
-
angular.js实现购物车功能
本文实例为大家分享了angular.js购物车功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <script src="angularjs/angular.js"></script> <st
-
angularjs实现天气预报功能
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天气</title> <script src="../angular-1.5.5/angular.min.js"></script&g
-
Angular实现的简单查询天气预报功能示例
本文实例讲述了Angular实现的简单查询天气预报功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular.min.js"></script> </head> <body ng-app="myApp&qu
-
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
注:添加球员的功能无指定技术要求,添加球员的页面也无具体样式要求. 1.实现上图页面所有元素,页面布局规整,跟上图效果一致 2.实现文案显示,按效果显示 3.实现查询,实现查询敏感词过滤,实现查询后列表变化 4.实现倒序,实现正序,下拉列表排序效果都实现 5.按钮背景一致,按钮样式 6.实现添加球员页面,添加球员页面样式,添加球员功能,添加球员必填项判断,添加完球员后能显示在表格内,已存在球员判重. 7.表格样式跟上图样式一致 代码: <!DOCTYPE html> <html lang
-
Angularjs 实现分页功能及示例代码
基于Angularjs实现分页 前言 学习任何一门语言前肯定是有业务需求来驱动你去学习它,当然ng也不例外,在学习ng前我第一个想做的demo就是基于ng实现分页,除去基本的计算思路外就是使用指令封装成一个插件,在需要分页的列表页面内直接引用. 插件 在封装分页插件时我实现了几种方式总体都比较零散,最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件,觉还不错,读了下他的源码就直接在项目中使用了. 原理和使用说明 1.插件源码主要
-
AngularJs实现分页功能不带省略号的代码
angularJs 的分页重点体现在对 过滤器 的使用.这个过滤器也并不复杂. 首先上 html 代码: <!DOCTYPE html> <html ng-app="demoApp"> <head> <meta charset="utf-"> <meta name="viewport" content="width=device-width"> <title&g
-
AngularJS 支付倒计时功能实现思路
说明: 1.前端只负责展示倒计时,不具备实际功能: 2.实际实现方式:数据库中设置一个每分钟执行一次的定时任务(故与实际情况会有一分钟以内的误差),只要订单创建时间超过15分钟会自动将订单状态改为"取消". 遇到难点: 1.字符串转date中,苹果satari浏览器不支持"yyyy-mm-dd hh:mi:ss"格式,须将字符串转为"yyyy/mm/dd hh:mi:ss" new Date($scope.order.createtime.rep
-
基于Angularjs实现分页功能
前言 学习任何一门语言前肯定是有业务需求来驱动你去学习它,当然ng也不例外,在学习ng前我第一个想做的demo就是基于ng实现分页,除去基本的计算思路外就是使用指令封装成一个插件,在需要分页的列表页面内直接引用. 插件 在封装分页插件时我实现了几种方式总体都比较零散,最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件,觉还不错,读了下他的源码就直接在项目中使用了. 原理和使用说明 1.插件源码主要基于angular direct
-
微信公众平台开发之天气预报功能
最近有项目需求给微信公众号上增加了天气预报功能,使用百度提供的车联网API V3.0中的天气查询功能实现.先上一张最终效果图: 项目需求:有连接好的微信平台,有百度注册帐号,需要在百度LBS开放云平台,添加应用,获取AK代码,PHP代码编辑器,如EditPlus等 下面详细介绍下开发步骤: 第一步:准备工作 登录微信公众平台,检查服务器配置是否已启用,URL(服务器地址) 是否已配置Token(令牌),与自己写的微信入口文件中的Token(令牌一致),如下图:然后点击提交,只至网页上提示绿色背景
-
微信小程序实现天气预报功能
本文实例为大家分享了微信小程序实现天气预报功能的具体代码,供大家参考,具体内容如下 这个案例是仿UC中天气界面做的中间也有点出入,预留了显示当前城市名字和刷新图标的位置,自己可以写下,也可以添加搜索城市.值得注意的是100%这个设置好像已经不好使了,可以通过获取设备的高度通过数据绑定设置高度.地址:weather 界面主要分为四部分: 第一部分 这里是预留的一块可以自行添加补充下 <view class="newTopView"> <!--左边添加当前城市名字,点击跳
-
微信小程序实现天气预报功能(附源码)
前言 最近在学小程序开发,刚好学到天气预报功能的制作,于是给大家分享下. 效果图 天气API获取 这里我用的是和风天气的API,打开官网注册或者登陆你的账号 进入控制台,新建应用 这是刚刚我们创建好的应用,点击添加KEY 选择WebAPI 这注册好我们的API了 微信小程序后台域名配置 登陆小程序后台,分别点击开发和开发设置 点击修改,将我们API的域名添加到request合法域名里面https://free-api.heweather.net 页面代码 .wxml <view class=&quo
随机推荐
- iOS App开发中修改UILabel默认字体的方法
- 高性能MySQL读书笔记 找出谁持有锁
- 消除XP操作系统自身的安全隐患
- Java中GC的工作原理详细介绍
- python版简单工厂模式
- 浅析JSONP技术原理及实现
- C#推送信息到APNs的方法
- mysql的分区技术详细介绍
- js如何判断是否在iframe中及防止网页被别站用iframe嵌套
- 解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
- 微信小程序 tabs选项卡效果的实现
- Js中setTimeout()和setInterval() 何时被调用执行的用法
- Linux 下读XML 的类详解及实现代码
- 64位系统中IIS7运行ASP时出现ADODB.Connection 800a0e7a错误的解决方法
- Mybatis结果生成键值对的实例代码
- ASP.net无法加载oci.dll解决新法
- ASP采集入库生成本地文件的几个函数
- 解决python3中解压zip文件是文件名乱码的问题
- 解决JavaWeb读取本地json文件以及乱码的问题
- Smarty模板变量与调节器实例详解