AngularJS和routeParams

Question

I have a piece of code that is getting JSON data from a local server. I am trying to display those data into a page and then when i'll click on a product i want to see the details of it. So far i can display all my products into a page but when i'm heading to the details page i got an error Cannot read property 'id' of undefined. Can you please help me out?

This is my code so far.

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>

Thanks!!!

Answer 1

you are getting the productList in your AppCtrl . If you want to access a specific item in your DetailsCtrl you'll need to get the specific item since you can't access AppCtrl scope variables in another Ctrl.

The best way to do this would be to create an extra rest call for getting a single item.

A quick way to fix your code, although I really don't recommend it would be to use $rootcope in your AppCtrl

I'd suggest reading Angular Docs on $scope. It might give you a better understanding how scopes work in angular: https://docs.angularjs.org/guide/scope# !

Answer 2

I assume you have injected ngRoute correctly.

angular.module('app', ['ngRoute'])

Other than that there is nothing wrong with your code.

Demo

Just check your code again.