Angular實(shí)現(xiàn)的簡單查詢天氣預(yù)報(bào)功能示例
更新時(shí)間：2017年12月27日 12:15:07 作者：當(dāng)愛0201
這篇文章主要介紹了Angular實(shí)現(xiàn)的簡單查詢天氣預(yù)報(bào)功能,涉及AngularJS針對第三方API接口交互的相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了Angular實(shí)現(xiàn)的簡單查詢天氣預(yù)報(bào)功能。分享給大家供大家參考，具體如下：
先來看看運(yùn)行效果：
具體代碼如下：
<!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>跟新時(shí)間:{{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>
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- angularjs實(shí)現(xiàn)天氣預(yù)報(bào)功能
- Angularjs添加排序查詢功能的實(shí)例代碼
- AngularJS模糊查詢功能實(shí)現(xiàn)代碼(過濾內(nèi)容下拉菜單排序過濾敏感字符驗(yàn)證判斷后添加表格信息)
- mongoDB 多重?cái)?shù)組查詢(AngularJS綁定顯示 nodejs)
- Angularjs分頁查詢的實(shí)現(xiàn)
- 對比分析Django的Q查詢及AngularJS的Datatables分頁插件
- Bootstrap + AngularJS 實(shí)現(xiàn)簡單的數(shù)據(jù)過濾字符查找功能
- angularjs 實(shí)現(xiàn)帶查找篩選功能的select下拉框?qū)嵗?/a>
- Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框示例代碼
相關(guān)文章
這篇文章主要介紹了AngularJS入門教程之Hello World!,本文用經(jīng)典的應(yīng)用程序“Hello World!”來講解AngularJS,要的朋友可以參考下2014-12-12
下面小編就為大家?guī)硪黄钊肜斫鈇ngularjs過濾器。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
AngularJS使用$http配置對象方式與服務(wù)端交互方法
今天小編就為大家分享一篇AngularJS使用$http配置對象方式與服務(wù)端交互方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Angularjs material 實(shí)現(xiàn)搜索框功能
這篇文章主要介紹了Angularjs material 實(shí)現(xiàn)搜索框功能的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了Angular2 (RC4) 路由與導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2016-09-09
Angular 2.0+ 的數(shù)據(jù)綁定的實(shí)現(xiàn)示例
本篇文章主要介紹了Angular 2.0+ 的數(shù)據(jù)綁定的實(shí)現(xiàn)實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了AngularJS中scope的綁定策略,結(jié)合實(shí)例形式簡單分析了AngularJS scope的三種綁定模式的使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-10-10
這篇文章主要介紹了Angularjs CURD 詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了AngularJS中下拉框的高級用法,結(jié)合實(shí)例形式分析了AngularJS下拉框的遍歷、選擇、綁定、顯示等功能實(shí)現(xiàn)方法,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了angularjs 緩存的使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03