Angularjs和routeParams

我有一段從本地服務器獲取JSON數據的代碼。我試圖將這些數據顯示在一個頁面中，然後當我點擊一個產品時，我想查看它的詳細信息。到目前爲止，我可以顯示我的所有產品到頁面中，但是當我前往詳細信息頁面時出現錯誤無法讀取未定義的屬性'id'。你能幫我解決嗎？Angularjs和routeParams

這是我的代碼到目前爲止。

app.js

'use strict'; 

angular.module('app', []). 
config(function($routeProvider){ 
    $routeProvider. 
     when("/", {templateUrl: "/partials/products.html"}). 
     when("/details/:id", {templateUrl: "/partials/details.html", controller: DetailsCtrl}). 
     otherwise({redirectTo: "/"}); 
}) 


function AppCtrl($scope, $http){ 
$http.get('http://localhost:3000/api/products/727617361726372') 
    .success(function(data){ 
     $scope.productList = data; 

     /*$scope.filterProductsByCategory = function(category){ 
      $scope.search = category 
     };*/ 
    }) 
    .error(function(data){ 
     console.log("Error!: "); 
    }); 
} 

function DetailsCtrl($scope, $routeParams){ 
    $scope.item = $scope.productList[$routeParams.id]; 
}

details.html

<h2>This is the details pages</h2> 
product id: {{ item.product_id }} 
<br/> 
product name: {{ item.product_name}}

的index.html

<div class="container" ng-app="app" ng-controller="AppCtrl"> 
    <h1 class="text-danger">Welcome to our Store</h1> 
    <hr/> 
    <ng-view></ng-view> 
</div>

products.html放在

<div class="col-lg-4 col-sm-6 col-xs-12" ng-repeat="product in productList"> 
<div class="thumbnail"> 
    <img src="img/img3.jpeg"> 
    <div class="caption"> 
     <h4><a href="#/details/{{product.product_id}}">{{ product.product_name }}</a></h3> 
     <p>Category: {{ product.category_name }} ({{ product.category_id }})</p> 
     <p class="text-muted">{{ product.product_details}}</p> 
     <ul class="list-inline"> 
      <li> 
       <p class="product-price btn">&euro; {{ product.product_price }}</p> 
      </li> 
      <li> 
       <a href="#" class="btn btn-success">Add to Cart</a> 
      </li> 
     </ul> 
    </div> 
</div>

謝謝！

來源

2015-10-03 T Karropoulos