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