ng-repeat Angular和JSON數組

我是Angular的新手，我試圖設置一個簡單的顯示。我瀏覽過ng-repeat的文檔，並且每次都完成了一些成功的教程。但是，當我去做自己的模擬時，我無法從JSON文件中獲取任何內容。即使使用經常發現的Angular「todo.json」示例，我仍然無法找到這個例子。我不確定它是否必須使用JSON執行某些操作或可能嵌套ng-repeat。任何人都可以引導我看到燈光？！呵呵。提前致謝。ng-repeat Angular和JSON數組

所以，這裏是Plunker鏈接。 http://plnkr.co/edit/8rNgPHUHEe88Gpw6aM1D

HTML：

<!doctype html> 
<html ng-app="App" > 
<head> 
    <meta charset="utf-8"> 
    <title>Todos $http</title> 
    <link rel="stylesheet" href="style.css"> 
    <script>document.write("<base href=\"" + document.location + "\" />");</script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script> 
    <script src="app.js"></script> 
</head> 
<body ng-controller="Calendar"> 
    <ul> 
    <li ng-repeat="items in events"> 
     {{items.events}} 
    </li> 
    </ul> 
</body> 
</html>

JS：

var App = angular.module('App', []); 

App.controller('Calendar', function($scope, $http) { 
    $http.get('todos.json') 
     .then(function(res){ 
      $scope.events = res.data;     
     }); 
});

JSON：

[ 
    { 
     "events": [ 
      { 
       "EventTitle": { 
        "href": "http://example.com/event1", 
        "text": "HEADLINE TEXT FOR EVENT 1" 
       }, 
       "HeadlineImage": { 
        "href": "http://example.com/event1", 
        "src": "http://example.com/Image.jpg", 
        "text": "CAPTION TEXT FOR IMAGE " 
       }, 
       "Eventdescription": "Lorem Loreem Loreeem Ipsum Ipsuum Ipsuuum ..." 
      } 
     ] 
    } 
]

來源

2014-11-24 Cedric

如果你必須保持這個結構，那麼你需要做這樣的事情

<ul> 
    <li ng-repeat="items in events"> 
    <a href="{{items.EventTitle.href}}">{{items.EventTitle.text}}</></a> 
    </li> 
</ul>

控制器：

App.controller('Calendar', function($scope, $http) { 
    $http.get('todos.json') 
     .then(function(res){ 
      $scope.events = res.data[0].events;    
     }); 
});

這裏有一個forked plunker

編輯： The revised plunker，使用上述變化。範圍VAR應該是一個新的JSON結構提供後res.data.events

更新： Here's實際JSON數據工作的例子

來源

2014-11-24 22:28:13 alou

Ahhhh ..我明白了!!!謝謝！ – Cedric 2014-11-24 23:16:32

我編輯了這個，ng-repeat會進行一些修改，以便修改修改過的代碼。乾杯。 – alou 2014-11-25 05:51:15

謝謝你的工作。現在我已經可以在本地使用JSON了，我想知道，並且原諒我在這方面很新穎，但是如何解釋這一點以鏈接到EXTERNAL JSON文件？我試圖把鏈接放在$ Http GET行中，但它不起作用，有一個簡單的解決方案將當前的LOCAL json鏈接到EXTERNAL json？我一直在淘汰StackOverflow這樣的東西，但我得到的只是$ ajax。這是在Angular中鏈接外部JSON文件的正確方法嗎？ – Cedric 2014-11-26 19:17:15

你的數據結構是很奇怪的。檢查更新的工作plunker：http://plnkr.co/edit/SXHjqxjZ2bgJSs327jz4?p=preview

您可以在您的視圖中使用<pre>{{ events | json }}</pre>輕鬆檢查/調試對象。

來源

2014-11-24 22:15:53 Olivier

嗯..反正有這種特定的形式，因爲API是結構化JSON內等工作這直接從kimono.io？ – Cedric 2014-11-24 22:19:27

ng-repeat Angular和JSON數組

回答

相關問題