Переадресация на страницу соответствующего продукта по щелчку в угловом UI-маршрутизаторе.

Question

Переадресация на страницу соответствующего продукта по щелчку в угловом UI-маршрутизаторе.

0

На моей домашней странице я получаю все продукты, которые я получаю от JSON, если я нажму конкретный образ продукта, он должен перенаправить на другую страницу, где должен отображаться только соответствующий продукт. Я знаю, что изменения должны производиться в singleproductcontroller, но я не знаю, как это сделать. Вот моя ссылка json link JSon

<html>
<head>
<title>Fad Street Den</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.4/angular-ui-router.js"></script>
<body cz-shortcut-listen="true">
<div>
{{name}}
<div ui-view="header"></div>
<div ui-view="content"></div>
</div>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controller.js"></script>
<script type="text/javascript" src="services.js"></script>
</body>
</html>

Файл App.js

   var app=angular.module('myApp', ['ui.router']);
   app.config(function($stateProvider,$urlRouterProvider)
   {
   $stateProvider
   .state('home',
   {
    url:'/',
    views:
   {
    'header':
    {
        templateUrl:"header.html"
    },
    'content':
    {
        templateUrl:"body.html",
        controller:"productscontroller"
    }
    }
   })
   .state('home.product',
   {
    url:'products/:id',
    views:
   {
    'content@':
    {
        templateUrl:"product.html",
        controller:"singleproductcontroller"
    }
    }
   })
   $urlRouterProvider.otherwise('/');   
   })

Controller.JS

 var app=angular.module('myApp');
 app.controller('productscontroller',    ['$scope','productservice',function($scope,productservice)
 {
    $scope.name="kannan";
   productservice.productlists().then(function(response)
    {
    $scope.ans=response.data;
    console.log($scope.ans);
   },function(response)
    {
    console.log(response.status);
    return response.status;
   });
   }]);
   app.controller('singleproductcontroller',  ['$scope','$stateParams','productservice',function($scope,$stateParams,productse rvice)
   {
    productservice.productlists().then(function(response)
   {
     console.log($stateParams.id);
    var id=$stateParams.id;
    $scope.fullproducts=response.data;
    console.log($scope.fullproducts=response.data[$stateParams.id])
    $scope.products=$scope.fullproducts[$stateParams.id]
    console.log($scope.products);
    },function(response)
    {
    console.log(response.status);
    return response.status;
    });
    }])

header.html

   <body ng-app="myApp" ng-controller="productscontroller">
   <ul class="nav navbar-nav">
   <li class="active"><a ui-sref="home">Home</a></li>
   <li><a ui-sref="home">Home</a></li>
   </ul>
  </body>

Body.html

 <body ng-app="myApp" ng-controller="productscontroller">
 <div>
 <div style="height: 200px;" ng-repeat="x in ans">
 <img style="width: 100px;height: 100px;float: left;" class="img-responsive"  
     ng-src="{{x.imageURL1}}">
    <h1>{{x.color}}</h1>
    <p>{{x.brand}}</p>
    <p>{{x.gender}}</p>
  </div>
  </div>
 </body>

product.html

 <body ng-controller="singleproductcontroller">
    <div>
    <div style="height: 200px;">
        <img style="width: 100px;height: 100px;float: left;" class="img-responsive"  ng-src="{{x.imageURL1}}">
        <h1>{{products.color}}</h1>
        <p>{{products.brand}}</p>
        <p>{{products.gender}}</p>
      </div>
    </div>
  </body>

Kannan 01 сен. 2016, в 13:09

Источник

Теги:

javascript

jquery

angularjs

json

angular-ui-router

1 ответ

Ещё вопросы

viveso · Answer 1 · 2016-09-01T09-23-00.000Z

Вы должны добавить директиву ui-sref к изображению. Это приведет вас к состоянию продукта. Что-то вроде этого:

<div ng-repeat="x in ans">
    <a ui-sref="home.product({id: x.id})"><img ></a>
<div>

Да, чувак, я исправил это, но как я могу получить этот конкретный идентификатор один из службы (из JSON). Вот мой сервис app.service ('productservice', function ($ http) {this.productlists = function (index) {return $ http.get (" api.myjson.com/bins/5a403/:prodcutId" ) .success (функция (данные) {возврат данных;}) .error (функция (данные) {возврат данных;});}}); Можете ли вы написать функцию вызова, я получу конкретный идентификатор через параметры маршрута, я хочу знать, как получить эти конкретные данные идентификатора