Question

我有一段代码从本地服务器获取JSON数据。我试图将这些数据显示到页面中，然后当我点击产品时，我想看到它的详细信息。到目前为止，我可以将所有产品显示在页面中，但是当我前往详细信息页面时，我收到错误无法读取未定义的属性“id”。你能帮帮我吗？

到目前为止，这是我的代码。

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>

感谢!!!

Answer 1

您的productList获得了AppCtrl。如果您想访问DetailsCtrl中的特定项目，则需要获取特定项目，因为您无法在另一个Ctrl中访问AppCtrl范围变量。

执行此操作的最佳方法是为获得单个项目创建额外的休息呼叫。

修复代码的快速方法，虽然我真的不推荐它，但在$rootcope

中使用AppCtrl

我建议在$ scope上阅读Angular Docs。它可能会让您更好地了解范围如何在角度中工作： https://docs.angularjs.org/guide/scope#！

Answer 2

我假设您已正确注入ngRoute。

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

除此之外，您的代码没有任何问题。

Demo

再次检查您的代码。

Angularjs和routeParams

2 个答案: