AngularJS (10-2) $http.get 讀json

作者： -

本篇完整程式碼：(Plunkr)

$http.get('XXX.json') 就可以讀取json檔了。若你不清楚$http.get()或是.success()，請看前一篇文章：AngularJS (10) $http.get 讀檔


實例

我有兩個人的資料，人名和地址。我想把他們顯示在網頁上。

Lily, ooh
Ihc, lala


test.json

text.json 用到兩種括號，意義是 [] = array，{} = list。字串要有" "。

[
  {
    "name":"Lily",
    "addr":"Hualien"
  },
  {
    "name":"Ihc",
    "addr":"Taipei"
  }
]

HTML

假設我們只是想要印出人名和地址，這樣寫就夠了。注意，不管在HTML或是JS，json變數的.name, .addr不需要" "。 
<body ng-app="app1" ng-controller="HelloController">
    <p ng-repeat="item in list">
         {{item.name}}, {{item.addr}}
    </p>
</body>

JS

初始化一個空陣列$scope.list，再用$http.get()讀取text.json。 
var app = angular.module("app1",[])

app.controller("HelloController", ['$scope','$http',function($scope, $http){
  $scope.list=[];
  
  $http.get('test.json').success(function(data){
    angular.forEach(data,function(item, ind){
      $scope.list.push(item);
    });
  });
}]);

完成

Lily, ooh
Ihc, lala

留言

張貼留言

這個網誌中的熱門文章

AngularJS (19) ng-repeat 特殊變數 $index, $even, $first

作者： -
angular .module('app',[]) .controller('ctrl',["$scope",function($scope){ $scope.people = [ {name:'Ihc Pig'}, {name:'Lily Pig'}, {name:'AA Pig'}, {name:'BB Pig'} ]; }]); 索引 $index <body ng-app="app" ng-controller="ctrl"> <p ng-repeat="person in people" ng-class="{item_yellow: $even}" > { { $index } }. name = { { person.name } } </p> </body> {{$index}}. name = {{person.name}} 偶數列 $even <body ng-app="app" ng-controller="ctrl"> <p ng-repeat="person in people" ng-class="{item_yellow: $even}" > name = { { person.name } } </p> </body> name = {{person.name}} 奇數列 $odd <body ng-app="app" ng-controller="ctrl"> <p ng-repeat="person in people" ng-class="{item_...
閱讀完整內容

AngularJS (8) directive templateUrl

作者： -
本篇完整程式碼請看( Plunkr ) 當HTML很長或是有重複的內容時，為了讓HTML更好管理、更有組織，所以將很長的內文或是重複的內容抽出放到樣版(template)裡，讓HTML模組化。 AngularJS的宣告標籤有個參數，templateUrl，指定要匯入哪份樣版到HTML頁面。而且，宣告標籤的位置，就決定了樣版匯入到HTML的地方。 舉個例子，我們想在網頁第一頁的開頭顯示一段歡迎文，讓網友覺得親切。 Hello, everyone. Welcome to Titiau. 如果是一般的HTML寫法： <body ng-app="app1"> <p> Hello, everyone.<br/> Welcome to Titiau.<br/> </p> </body> 問題是，這個歡迎文可能很常用，總不能一直複製貼上吧？ <body ng-app="app1"> <p> Hello, everyone.<br/> Welcome to Titiau.<br/> </p> ... <p> Hello, everyone.<br/> Welcome to Titiau.<br/> </p> ... <!--看起來好像蠻冗長的？^_^"--> </body> 所以我們不直接寫死在第一頁，而是把歡迎文字寫到一個樣版。 歡迎文字的樣版 greet.html Hello, everyone.<br/> Welcome to Titiau.<br/> <br/> JS 為了能夠匯入歡迎樣版到第一頁，我們得定義一個連結到歡迎樣版的宣告標籤。 var app = angular.module("app1",[]); app.directive(...
閱讀完整內容