$http({ method: 'GET', url: '/api/users.json'}).success(function(data,status,headers,config){ //當相應準備就緒時調用}).error(function(data,status,headers,config){ //當響應以錯誤狀態返回時調用});
二、AngularJS擷取JSON資料執行個體代碼
1、data.json:
[ { "Name":"Mahesh Parashar", "RollNo":101, "Percentage":"80%" }, { "Name":"Dinkar Kad", "RollNo":201, "Percentage":"70%" }, { "Name":"Robert", "RollNo":191, "Percentage":"75%" }, { "Name":"Julian Joe", "RollNo":111, "Percentage":"77%" }]
2、index.html:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>angular_learn</title> <script src="js/angular-1.3.0.js"></script></head><body> <div class="dataList" ng-app="myApp" ng-controller="myController"> <ul> <!--在讀取資料的地區添加ng-repeat--> <li ng-repeat="student in students"> <span>{{student.Name}}</span> <span>{{student.RollNo}}</span> <span>{{student.Percentage}}</span> </li> </ul> </div> <script src="js/angular-1.3.0.js"></script> <script> var myApp = angular.module("myApp",[]); myApp.controller("myController",function ($scope, $http) { var dataUrl = "json/data.json"; //擷取資料 $http.get(dataUrl).success(function (data) { $scope.students = data; }).error(function () { alert("出錯"); }); }); </script></body></html>
三、方法總結
1、 配置對應的控制器，將$scope、$http服務注入改控制器中；
2、使用$http.get(),把將要讀取的資料檔案的url寫入；
3、使用回呼函數，成功時，將所得的data賦給$scope範圍下的變數products。
4、由前台使用ng-repeat指令進行遍曆逐一取出資料。
部分內容轉載自：面具哥布林的部落格
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
