AngularJs。正確讀取JSON

我是AngularJS的noob，但試圖通過它學習我的方式。AngularJs。正確讀取JSON

我有以下控制器。它根據URL獲取JSON文件。

app.controller('PortfolioItemCtrl', ['$scope', '$routeParams', '$http', 
    function($scope, $routeParams, $http) { 
     $http.get('pages/portfolio/' + $routeParams.itemId + '.json'). 
      success(function(data) { 
       $scope.item = data; 
     }); 
}]);

問題，我似乎無法讀取這個JSON，如我所料。

在這裏，我多麼想在我的HTML獲取這樣的數據：

 <div ng-controller="PortfolioItemCtrl"> 
     <h1>{{item.cat}}</h1> 
     <p>{{item.desc}}</p> 
     </div>

我的JSON看起來像這樣

{ 
    "item_1": { 
     "id":"1", 
     "cat": "Web design", 
     "desc": "Online magazine design for <em> \"Calcus\" <\/em> brand", 
     "images": [ 
      "img/portfolio-item-1.jpg", 
      "img/portfolio-item-2.jpg" 
     ] 
    } 
}

但它不提供任何數據。但是，如果我將{{item}}放入HTML中，我可以看到它獲取了JSON文件。

請幫我理解我做錯了什麼。我希望你的解釋和一些直接的建議，以便學習關於這個特定主題的AngularJS的重點。

來源

2014-09-05 jonny pixel

嘗試

<div ng-controller="PortfolioItemCtrl"> 
    <h1>{{item.item_1.cat}}</h1> 
    <p>{{item.item_1.desc}}</p> 
    </div>

來源

2014-09-05 08:25:22 alpinescrambler

有趣的事情。但是，是的，情況就是這樣。 – 2014-09-05 08:43:48

看起來你的JSON數據是

{ 
    $scope.item = { 
     "item_1": { 
      "id":"1", 
      "cat": "Web design", 
      "desc": "Online magazine design for <em> \"Calcus\" <\/em> brand", 
      "images": [ 
       "img/portfolio-item-1.jpg", 
       "img/portfolio-item-2.jpg" 
      ] 
     } 
    } 
}

所以就叫{{item.item_1.cat}}代替{{item.cat}}與您的模板不過，我覺得我已經試過了

來源

2014-09-05 08:26:06 dddd1919

是的，情況就是如此。：）謝謝 – 2014-09-05 08:44:06

AngularJs。正確讀取JSON

回答

相關問題