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相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关推荐
-
mongoDB 多重数组查询(AngularJS绑定显示 nodejs)
核心代码: js代码 var Lesson = Schema({ lessonName: String, intr: String, creTime: Date, sort: String, //分类 imgUrl: String, //封面地址 price: Number, teacher: String,//教师 subTitle:[{ lNo: Number, subLName: String, src: String, filtered: {type: Boolean, default:
-
Angularjs添加排序查询功能的实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="angular-1.3.0.js"></script&g
-
对比分析Django的Q查询及AngularJS的Datatables分页插件
使用Q查询,首先要导入Q模块: from django.db.models import Q 可以组合使用&,|操作符用于多个Q的对象,产生一个新的Q对象,Q对象也可以用~操作符放在前面表示否定,如下例所示: if search: keywords_list = search.split(' ') query_list = [Q(status__icontains=get_success_fail_status(keyword)) if get_success_fail_keyword_stat
-
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
具体代码如下所示: find.html <!DOCTYPE html> <html ng-app="find"> <head> <title>字符查找</title> <meta charset="utf-8"/> <script src="../Script/angular.min.js" type="text/javascript">&l
-
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
注:添加球员的功能无指定技术要求,添加球员的页面也无具体样式要求. 1.实现上图页面所有元素,页面布局规整,跟上图效果一致 2.实现文案显示,按效果显示 3.实现查询,实现查询敏感词过滤,实现查询后列表变化 4.实现倒序,实现正序,下拉列表排序效果都实现 5.按钮背景一致,按钮样式 6.实现添加球员页面,添加球员页面样式,添加球员功能,添加球员必填项判断,添加完球员后能显示在表格内,已存在球员判重. 7.表格样式跟上图样式一致 代码: <!DOCTYPE html> <html lang
-
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
-
angularjs 实现带查找筛选功能的select下拉框实例
一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析: 目标 在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的sele
-
Angularjs实现带查找筛选功能的select下拉框示例代码
前言 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!所以为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析 我们的目标是在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的select的功
-
Angularjs分页查询的实现
angularjs实现分页查询功能的实例代码,具体代码如下所示: //首页导入<script type="text/javascript" src="framework/tm.pagination.js"></script> //routerApp中注入'tm.pagination' //html页面上<tm-pagination conf="paginationConf"></tm-pagination
-
Angular实现的简单查询天气预报功能示例
本文实例讲述了Angular实现的简单查询天气预报功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular.min.js"></script> </head> <body ng-app="myApp&qu
-
使用Angular.js实现简单的购物车功能
先给大家分享实现代码,在代码下面有效果图展示,大家可以两者结合参考下,废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://code.angularjs.org/1.2.5/angular.min.js"></script
-
JavaWeb实现简单查询商品功能
本文实例为大家分享了JavaWeb实现简单查询商品功能的具体代码,供大家参考,具体内容如下 CustomerServlet.java package com.subing.web; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet
-
NodeJS简单实现WebSocket功能示例
本文实例讲述了NodeJS简单实现WebSocket功能.分享给大家供大家参考,具体如下: 我们基于express和socket.io开发,首先我们需要安装以下包 npm install --save express npm install --save socket.io 服务器端代码: var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(ht
-
Java简单验证身份证功能示例
本文实例讲述了Java简单验证身份证功能.分享给大家供大家参考,具体如下: package org.cxy.csdn.example; import java.util.Calendar; import java.util.HashMap; import java.util.Map; import javax.xml.bind.Validator; /** * 身份证验证的工具(支持5位或18位省份证)<br/> * 身份证号码结构: * <ol> * <li>17位数
-
AngularJS实现的简单拖拽功能示例
本文实例讲述了AngularJS实现的简单拖拽功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>www.jb51.net AngularJS拖拽</title> <style> *{ padding:0; margin:0; } .wei{ wi
-
jQuery实现简单日期格式化功能示例
本文实例讲述了jQuery实现简单日期格式化功能.分享给大家供大家参考,具体如下: 代码如下,引入jquery后直接后加入以下代码刷新可测试 Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 &
-
JAVAEE中用Session简单实现购物车功能示例代码
Session简单实现购物车功能 这个小程序主要就3个页面,一个商品列表页面(HomeServlet),一个是提示加入购物车页面(AddCartTipServlet),一个是显示购物车清单页面(ShowCartServlet). HomeServlet页面: @WebServlet({ "/HomeServlet", "/home" }) public class HomeServlet extends HttpServlet { private static fi
-
prototype.js简单实现ajax功能示例
本文实例讲述了prototype.js简单实现ajax功能.分享给大家供大家参考,具体如下: 原本不知道prototype.js是一个框架,只当其是一个再普通不过的JS文件.随手拿着用了用,写了一个JSP页面,单纯的用prototype.js来实现AJAX效果.用了之后发现超好用,自己再也不用写那么大一堆代码了,哦耶.言归正传,还是把今天写的那个小代码发上来. 一.JSP部分 这部分的代码,最为关键的是JS部分的改变.没有采用prototype.js的时候,生成一个AJAX效果,起码得有四大段.
-
JS实现的简单四则运算计算器功能示例
本文实例讲述了JS实现的简单四则运算计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <meta name="content-type" content="text/html; charset=UTF-8"> <head> <title>www.jb51.net 计算器 Calculator</title> <!
随机推荐
- 详解IE6中的position:fixed问题与随滚动条滚动的效果
- javascript实现简单的html5视频播放器
- jQuery+ajax实现鼠标单击修改内容的思路
- 详解Node.js中exports和module.exports的区别
- 简单的js表单验证函数
- C#采用FileSystemWatcher实现监视磁盘文件变更的方法
- PHP 5.0对象模型深度探索之类的静态成员
- javascript用正则表达式把1234567890替换为abcdefghij
- Python兔子毒药问题实例分析
- JavaScript实现的简单拖拽效果
- 利用策略模式与装饰模式扩展JavaScript表单验证功能
- jquery UI Datepicker时间控件的使用方法(终结版)
- JavaScript 语言精粹学习笔记第1/2页
- JS扩展Z-Blog图片验证码的单击自动刷新与评论内容自动保存
- JavaScript全排列的六种算法 具体实现
- 关于C语言多线程pthread库的相关函数说明
- 深入分析下javascript中的[]()+!
- ipv6实现tcp编程示例
- 基于Android扫描sd卡与系统文件的介绍
- 如何去除vue项目中的#及其ie9兼容性