Детали товара Страница с помощью angularjs $ routeParams

Я создаю интернет-магазин с angularjs, и мне сложно определить, как установить ссылку на details.html и отобразить конкретные детали. В настоящее время, когда я нажимаю кнопку просмотра больше, url отобразит имя элемента. Единственный способ, с помощью которого я могу показать это, - это создать такую ссылку: #/details /: {{item.name}}. Все, что я читал в Интернете, говорит, что это должно быть #/details /: name, но которое возвращает: name в url, а не детали /: Macbook Pro в качестве примера. Если я сделаю это правильно, он перенаправляет обратно на главную страницу. Вот мой код.

app.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; 
}; 





}]);

computers.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 и я знаю, что это неверно. Любая помощь будет принята с благодарностью.

источник

2016-07-04 Travis Davis

Я понял, мне нужно было создать контроллер для подробной страницы, а затем получить данные json. Затем я сменил ссылку на ссылку на ссылку

<a href="#/details/{{products.indexOf(item)}}" class="btn btn-custom"> View Product</a>

источник

2016-07-04 16:15:54

Детали товара Страница с помощью angularjs $ routeParams

ответ

Смежные вопросы