標籤：方法 script 作用 nbsp track url min center jquer
相比較jquery ，angular對這種介面資料處理起來會方便的多。這裡舉例調用 中國天氣網的api介面。
首先肯定要引入angular.js這個不多說
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"></link><script type="text/javascript" src="./js/angular.js"></script>
其次js代碼如下：
var app = angular.module("myApp", []); app.controller("myCtrl", [‘$scope‘,‘$http‘, function($scope,$http) { var url=‘http://wthrcdn.etouch.cn/weather_mini?city=‘+‘北京‘; $http.get(url).then(function (response) { $scope.cityname=response.data.data.city $scope.myweather= response.data.data.forecast; }); }]);
用ng-app管理angularjs 作用範圍，控制器ng-controller這個去寫你的方法。這些都是必須的
div代碼：
<body ng-app="myApp"><div ng-controller="myCtrl"> <div> <p style="font-size: 18px;text-align: center;font-weight: 600; color: rgb(200,10,10)">{{cityname}}</p> <table class="table" id="tale"> <th>日期</th> <th>風力</th> <th>風向</th> <th>最高溫度</th> <th>最低溫度</th> <th>天氣狀況</th> <tr ng-repeat="i in myweather "> <td>{{i.date}}</td> <td>{{i.fengli}}</td> <td>{{i.fengxiang}}</td> <td>{{i.high}}</td> <td>{{i.low}}</td> <td>{{i.type}}</td> </tr> </table></div></body>
這裡非常方便的是這個 :ng-repeat,迴圈列印出你想列印的資料。當然你們以後肯定會遇到類似這種：
這是因為你的數組中存在相同資料，所以你只需要在 ng-repeat中加入"track by $index"就好了， 例如ng-repeat=" i in 你的資料 track by $index" 。
頁面展示如下：
angularJS簡單掉用介面，實現數組頁面列印
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
