Angular實現(xiàn)的簡單查詢天氣預報功能示例
更新時間：2017年12月27日 12:15:07 作者：當愛0201
這篇文章主要介紹了Angular實現(xiàn)的簡單查詢天氣預報功能,涉及AngularJS針對第三方API接口交互的相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了Angular實現(xià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>跟新時間:{{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)天氣預報功能
- 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動態(tài)綁定ng-options的ng-model實例代碼
本篇文章主要介紹了AngularJS動態(tài)綁定ng-options的ng-model實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Angular2關(guān)于@angular/cli默認端口號配置的問題
本篇文章主要介紹了Angular2關(guān)于@angular/cli默認端口號配置的問題，非常具有實用價值，需要的朋友可以參考下2017-07-07
本篇文章主要介紹了angularjs 頁面自適應(yīng)高度的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了angular簡介和其特點介紹,本文講解了關(guān)于和jquery的比較、關(guān)于適用場合、關(guān)于UI的結(jié)合、關(guān)于angularjs的特點等內(nèi)容,需要的朋友可以參考下2015-01-01
angular6根據(jù)environments配置文件更改開發(fā)所需要的環(huán)境的方法
這篇文章主要介紹了angular6根據(jù)environments配置文件更改開發(fā)所需要的環(huán)境的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
angularJS與bootstrap結(jié)合實現(xiàn)動態(tài)加載彈出提示內(nèi)容
這篇文章主要介紹了angularJS與bootstrap結(jié)合實現(xiàn)動態(tài)加載彈出提示內(nèi)容,通過bootstrp彈出提示。感興趣的朋友可以參考下本篇文章2015-10-10
AngularJS操作鍵值對象類似java的hashmap(填坑小結(jié))
我們知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法，那么在angularJS中如何創(chuàng)造（使用）這樣一個對象呢？今天小編通過本文給大家分享下，感興趣的朋友一起學習吧2016-11-11
這篇文章主要介紹了使用Angular.js制作一個簡單的RSS閱讀器的教程,AngularJS是一個非常有人氣的JavaScript庫,文中介紹的制作方法主要使用到了FreedReadR模版,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細介紹了angularjs點擊圖片放大實現(xiàn)上傳圖片預覽的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
本篇文章主要介紹了angular使用bootstrap方法手動啟動的實例代碼，具有一定的參考價值，有興趣的可以了解一下2017-07-07