0

我正在使用 angularjs 建立一个在线商店，我很难弄清楚如何链接到 details.html 并让它显示特定项目的详细信息。目前，当我单击查看更多按钮 url 时，将显示项目的名称。我可以让它显示的唯一方法是创建这样的链接：#/details/:{{item.name}}。我在网上阅读的所有内容都说它应该是 #/details/:name 但它在 url 中返回 :name 而不是 details/:Macbook Pro 作为示例。如果我以正确的方式进行操作，它将重定向回主页。到目前为止，这是我的代码。

应用程序.js

var myApp = angular.module('app', ['ngRoute']);
myApp.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
        $routeProvider.
        when('/home',{
            templateUrl: 'partials/home.html',
            controller: "storeCtrl"
        }).
        when('/about',{
            templateUrl: 'partials/about.html',
            controller: "storeCtrl"
        }).
        when('/computers',{
            templateUrl: 'partials/computers.html',
            controller: "storeCtrl"
        }).
        when('/smartphones',{
            templateUrl: 'partials/smartphones.html',
            controller: "storeCtrl"
        }).
        when('/tablets',{
            templateUrl: 'partials/tablets.html',
            controller: "storeCtrl"
        }).
        when('/details/:{{item.name}}',{
            templateUrl: 'partials/details.html',
            controller: "storeCtrl"
        }).

        otherwise({
            redirectTo: '/home'             
        });
    }]);

myApp.controller('storeCtrl', ['$scope', '$http', '$routeParams',  function($scope, $http, $routeParams) {


$scope.homeHeading = 'All Products';
$scope.aboutHeading = 'About Us';
$scope.computersHeading = 'Computers';
$scope.smartphonesHeading = 'Smartphones';
$scope.tabletsHeading = 'Tablets';

$http.get('js/products.json').then(function(result) {
    $scope.products = result.data;


});

$scope.minusOne = function(index) { 
    $scope.products[index].dislikes += 1; 
};
$scope.plusOne = function(index) { 
    $scope.products[index].likes += 1; 
};





}]);

计算机.html

<div>
<h1>{{computersHeading}}</h1>

<div class="product col-md-4" ng-repeat="item in products | filter:search   | filter:'Laptop'">
<img ng-src="{{ item.cover }}" >
<h3>{{ item.name }}</h3>
<p class="price">{{ item.price }}</p>
<p class=""> <b>Storage</b>: {{ item.specs.storage }}</p>
<p> <b>Memory</b>: {{ item.specs.memory }}</p>

<!----- Save ratings for details page 
<div class="rating">
    <p class="likes" ng-click="plusOne($index)">
    <i class="fa fa-thumbs-up"></i>
    {{ item.likes }} </p>
    <p class="dislikes" ng-click="minusOne($index)"><i class="fa fa-thumbs-down"></i> {{ item.dislikes }} </p>

</div> -->
<a href="#/details/:{{item.name}}" class="btn btn-custom"> View Product</a>

</div>

</div>

同样，让项目名称显示在 url 中的唯一方法是在 url 中使用方括号，我知道这是不正确的。任何帮助将不胜感激。

4

1 回答 1

0

我发现，我需要为详细信息页面制作一个控制器，然后获取 json 数据。然后我将我的href链接更改为

<a href="#/details/{{products.indexOf(item)}}" class="btn btn-custom"> View Product</a>
于 2016-07-04T16:15:54.167 回答