angularjs實(shí)現(xiàn)天氣預(yù)報(bào)功能
更新時間：2020年06月16日 09:20:16 作者：飛鳥96
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)天氣預(yù)報(bào)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了angularjs實(shí)現(xiàn)天氣預(yù)報(bào)的具體代碼，供大家參考，具體內(nèi)容如下
<!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()">點(diǎn)擊查詢</button>
<ul ng-show="show">
<li>{{cityName}}</li>
<li>{{date}}</li>
<li>{{mTemp}}</li>
<li>{{xTemp}}</li>
</ul>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了淺談Angular2 模塊懶加載的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
解決Angular2 router.navigate刷新頁面的問題
今天小編就為大家分享一篇解決Angular2 router.navigate刷新頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
AngularJS自定義插件實(shí)現(xiàn)網(wǎng)站用戶引導(dǎo)功能示例
這篇文章主要介紹了AngularJS自定義插件實(shí)現(xiàn)網(wǎng)站用戶引導(dǎo)功能,結(jié)合實(shí)例形式分析了AngularJS自定義插件的實(shí)現(xiàn)步驟與相關(guān)功能技巧,需要的朋友可以參考下2016-11-11
Angular懶加載機(jī)制刷新后無法回退的快速解決方法
使用oclazyload懶加載angular的模塊,刷新頁面后,單擊回退按鈕無法返回上一個頁面.怎么回事呢？下面小編給大家?guī)砹薬ngular懶加載機(jī)制刷新后無法回退的快速解決方法，非常不錯，感興趣的朋友參考下2016-08-08
本文給大家分享Angularjs cookie 操作實(shí)例詳解，demo案例分析，感興趣的朋友參考下吧2017-09-09
利用Angular2 + Ionic3開發(fā)IOS應(yīng)用實(shí)例教程
這篇文章主要給大家介紹了關(guān)于利用Angular2 + Ionic3開發(fā)IOS應(yīng)用的相關(guān)資料，文中通過示例代碼和圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
這篇文章主要介紹了Angular4中的checkbox?全選按鈕啟用禁用的相關(guān)資料,需要的朋友可以參考下2023-03-03
詳解Angular的數(shù)據(jù)顯示優(yōu)化處理
本文主要對Angular的數(shù)據(jù)顯示優(yōu)化處理進(jìn)行詳細(xì)介紹，具有一定的參考價值，下面跟著小編一起來看下吧2016-12-12
詳解AngularJs中$resource和restfu服務(wù)端數(shù)據(jù)交互
之前小編和大家分享過使用$http同服務(wù)器進(jìn)行通信，但是功能上比較簡單，angularjs還提供了另外一個可選的服務(wù)$resource,使用它可以非常方便的同支持restful的服務(wù)單進(jìn)行數(shù)據(jù)交互。下面來一起看看吧。2016-09-09
AngularJS實(shí)現(xiàn)ajax請求的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)ajax請求的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)ajax請求的前端界面、ajax交互及后臺php處理技巧,需要的朋友可以參考下2016-11-11