2015-09-22 2 views
1

У меня есть страница с указанием категорий здесь Я загружаю категории из моего запроса api при нажатии на первую категорию Мне нужно загрузить некоторые другие страницы, говорящие о продуктах, и вам необходимо загрузить продукты из другого апи. Когда я связать его с простой HREF отображаетКак добавить ссылки в угловые js с динамическим выходом

{{ product.productname }}

MyController страницы:

var app = angular.module('myApp', []); 
app.controller('CategoryController', function($scope, $http) { 
    $http.get("http://192.168.1.112/estore/api/get-categories") 
    .success(function(response) {$scope.categories = response.categories;}); 
}); 
app.controller('ProductController', function($scope, $http) { 
    $scope.id = 2; 
    $http.get("http://192.168.1.112/estore/api/get-products?id=id") 
    .success(function(response) {$scope.products = response.categories;}); 
}); 

Мой индексной страницы:

<body ng-app="myApp"> 
     <div role="main" class="ui-content" ng-controller="CategoryController"> 
      <ul class="cat" ng-repeat="x in categories"> 
      <li> 
       <a href="list.html/{{x.id }}"> {{ x.name }} </a> 
      </li> 
      </ul> 
     </div> 
     </body> 

мой listpage:

<body ng-app="myApp"> 
     <div role="main" class="ui-content" ng-controller="ProductController"> 
      <ul class="cat" ng-repeat="pdts in products"> 
      <li> 
       {{ pdts.productname }} 
      </li> 
      </ul> 
     </div> 
     </body> 
+0

** MyController страница: ** 'вар приложение = angular.module ('MYAPP', []); app.controller ('CategoryController', function ($ scope, $ http) { $ http.get ("http://192.168.1.112/estore/api/get-categories") .success (функция (ответ) {$ scope.categories = response.categories;}); }); app.controller ('ProductController', function ($ scope, $ http) { $ scope.id = 2; $ http.get ("http://192.168.1.112/estore/api/get-products?id = id ") .success (функция (ответ) {$ scope.products = response.categories;}); }); ' – Dayana

+1

Я предлагаю вам внимательно ознакомиться с [официальным учебником AngularJS] (https://docs.angularjs.org/tutorial), чтобы получить базовое представление о том, как работает Angular. Например. вы не должны иметь два '' тегов с директивой 'ng-app' дважды. – muenchdo

+0

это не должно выглядеть так: '$ http.get (" http://192.168.1.112/estore/api/get-products?id= "+ id)" и, откровенно говоря, согласился с ** muenchdo **. – Jai

ответ

0

Есть два варианта: -

1) you can use $state.go() and pass id parameters to products state. 

2) you can use $cookiestore and set the id in the cookie and later retrieve in the products state. 



var app = angular.module('myApp', []); 

    app.config(['$stateProvider',function($stateProvider){ 
     $stateProvider.state('products',{ 
      url: '/products/:ID', 
      title: 'productlist', 
      templateUrl: 'app/views/product/productlist.html', 
      controller:'productlistController' 
     }) 
    }]); 



app.controller('CategoryController', function($scope, $http ,$state) { 

     $http.get("http://192.168.1.112/estore/api/get-categories") 
     .success(function(response){ 
      $scope.categories = response.categories; 
     }); 

     $scope.redirectTo = function(id){ 
      $state.go('products', {ID : id}); 
     }; 

    }); 



app.controller('ProductController', function($scope, $http , $state) { 
     var id = $state.params.ID; 
     $http.get("http://192.168.1.112/estore/api/get-products?id="+id) 
     .success(function(response) { 
      $scope.products = response.products; 
     }); 
    }); 

INDEX PAGE

<body ng-app="myApp"> 
<div role="main" class="ui-content" ng-controller="CategoryController"> 
    <ul class="cat" ng-repeat="x in categories"> 
    <li> 
      <a ng-click="redirectTo(x.id)"> {{ x.name }} </a> 
    </li> 
    </ul> 
</div> 
</body> 
Смежные вопросы