将参数传递给URL中的$ scope.id - angularJS [英] Passing parameter to $scope.id from URL - angularJS

问题描述

我试图将浏览器中的URL参数传递给控制器​​，例如，应将 122 传递给 $ scope.id ，因此加载的JSON是 http://52.41.65.211:8028/api/v1/categories/122/books.json ，不起作用尽管如此，任何想法？

URL示例
http://www.example.com/categories/122

app.js

  ... 
 .when（'/ categories /：categoryId'，{
 controller： 'BookCategoryController'，
 templateUrl：'views / booksincategory.html'
}）
 ... 
  

控制器

  app.controller（'BookCategoryController'，[ '$ scope'，'bookcategories'，'$ routeParams'，函数（$ scope，bookcategories，$ routeParams）{
 book categories.getAllBooks（$ scope.id）.then（function（response）{
 $ scope.detail = response.data.books [$ routeParams.categoryId]; 
}）; 
}]）; 
  

服务

< pre $ app.service（'bookcategories'，['$ http'，function（$ http）{
return {
getAllBooks：function（id）{
return $ http.get（'http://52.41.65.211:8028/api/v1/categories/'+ id +'/books.json'）
}
}
}]）;


booksincategory.html

 < div class =category colng-repeat =book book in detail> 
< h3 class =title> {{book.title}}< / h3> 
< / div> 
  

解决方案

如果您的网址< http ：//www.example.com/categories/122 和路由参数就像

  .when （'/ categories /：categoryId'，{
 controller：'BookCategoryController'，
 templateUrl：'views / booksincategory.html'
}）
  

那么你将在控制器中获得 categoryId 作为 $ routeParams。 categoryId

只需设置 $ scope.id = $ routeParams.categoryId;

在调用服务之前在控制器中设置它。所以你的控制器就像

  app.controller（'BookCategoryController'，['$ scope'，'bookcategories'，'$ （$ scope，bookcategories，$ routeParams）{
 $ scope.id = $ routeParams.categoryId; 
 bookcategories.getAllBooks（$ scope.id）.then（function（response）{
 $ scope.detail = response.data.books; 
}）; 
}]）; 
  

只需使用

  $ scope.detail = response.data.books; 
  

不需要使用$ scope.detail = response.data.books [$ routeParams.categoryId];它的语法不正确。希望这会对你有用。您在控制器中错误地分配了$ scope.detail。我在HTML中看到任何问题

I'm trying to pass a parameter from the URL in the browser to a controller, for example, the 122 should be passed in $scope.id in the controller so the JSON loaded is this http://52.41.65.211:8028/api/v1/categories/122/books.json, not working though, any idea?

URL example http://www.example.com/categories/122

app.js

   ...  
    .when('/categories/:categoryId', {
        controller: 'BookCategoryController',
        templateUrl: 'views/booksincategory.html'
    })
    ...

controller

app.controller('BookCategoryController', ['$scope', 'bookcategories', '$routeParams',  function($scope, bookcategories, $routeParams) {
    bookcategories.getAllBooks($scope.id).then(function(response) {
    $scope.detail = response.data.books[$routeParams.categoryId];
  });
}]);

service

app.service('bookcategories', ['$http', function($http) {
  return {
    getAllBooks: function(id) {
      return $http.get('http://52.41.65.211:8028/api/v1/categories/'+ id + '/books.json')
     }
  }
}]);

booksincategory.html

  <div class="category col" ng-repeat="book in detail">
     <h3 class="title">{{book.title}}</h3>
  </div>

解决方案

If your URL is http://www.example.com/categories/122 and route params is like

.when('/categories/:categoryId', {
    controller: 'BookCategoryController',
    templateUrl: 'views/booksincategory.html'
})

then you will get the categoryId in the controller as $routeParams.categoryId

Just set $scope.id = $routeParams.categoryId;

just set this in your controller before calling the service. So your controller will be like

app.controller('BookCategoryController', ['$scope', 'bookcategories', '$routeParams',  function($scope, bookcategories, $routeParams) {
    $scope.id = $routeParams.categoryId;
    bookcategories.getAllBooks($scope.id).then(function(response) {
       $scope.detail = response.data.books;
    });
}]);

Just use

$scope.detail = response.data.books;

no need to use $scope.detail = response.data.books[$routeParams.categoryId]; its an incorrect syntax. Hope that will work for you. You have assigned $scope.detail incorrectly in your controller. I dint see any issue in the HTML

这篇关于将参数传递给URL中的$ scope.id - angularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！