从ng-repeat中获取一个项目

Question

我有一个包含不同产品的主页，我想在其他视图中显示一个选定的产品。 （详细视图）。显示我使用ng-repeat的产品，它遍历product-Array。

现在，当点击一个按钮时，我会从ng-repeat中获得单个产品。然后，视图会随着所选产品而变为细节视图。视图的切换应该通过id，因为这需要向我的API发出请求。

在此状态下，我尝试使用$ routeParams，但它并没有工作。然后我在这里搜索了stackoverflow。我读过它可能是范围问题，因为我试图将ID传递给控制器​​。 （我需要另一个控制器中的Id）。 当我点击主页上的按钮时，没有任何事情发生。

我希望，有人有一个想法，如何解决这个问题。

这里是API的stample JSON文件：

{ 
    "_id": "582ae2beda0fd7f858c109e7", 
    "title": "Lorem ipsum", 
    "smalldescription": "Lorem ipsum dolor sit amet,", 
    "longdescription": "Lorem ipsum dolor sit ametLorem ipsum ", 
    "price": "2500", 
    "img": "Imagetxt" 
} 

这里是我的代码：

app.js

angular.module('Productportfolio', ['ngRoute']) 

.config(['$routeProvider', function ($routeProvider) { 

    $routeProvider 
     .when('/home', { 
      templateUrl: '/components/home/home.html', 
      controller: 'ProductCtrl' 
     }) 

     .when('/detail/:productId', { 
      templateUrl: '/components/detail/detail.html', 
      controller: 'DetailCtrl' 

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

home.html的

<div ng-controller="ProductCtrl as ProductCtrl"> 
    <div ng-repeat="product in ProductCtrl.products "> 
     <h3>{{product.title}}</h3> 
      <button ng-click="loadDetail(product)">Detailansicht</button> 
     </div> 
    </div> 

个

ProductCtrl.js

angular.module('Productportfolio') 

.controller('ProductCtrl', ['APIService','$location', function (APIService,$location) { 

    var vm = this; 
    vm.products = null; 

    init(); 

    function init() { 
     APIService.getProducts() 
      .then(function (response) { 
       vm.products = response.data; 
      }) 
      .catch(function (error) { 
       console.log("error at GET"); 
      }); 
    } 

    vm.loadDetail = function(product){ 
     $location.path('/detail'+product.id); 
    } 
}]); 

APISvc.js

angular.module('Productportfolio') 

.service('APIService', ['$http', function ($http) { 

    var svc = this; 
    svc.root = 'http://localhost:3000/api'; 

    svc.API = { 
     'getProducts': getProducts, 
     'getProduct' : getProduct 
    }; 
    return svc.API; 

    function getProducts() { 
     return $http({ 
      method: 'GET', 
      url: svc.root + '/products' 
     }) 
    } 

    function getProduct(id){ 
     return $http({ 
      method: 'GET', 
      url : svc.root +'/product/'+id 
     }) 
    } 
}]); 

DetailCtrl.js

angular.module('Productportfolio') 

.controller('DetailCtrl', ['APIService', '$routeParams', function (APIService, $routeParams) { 


    var vm = this; 
    vm.product = null; 
    vm.productId = $routeParams.productId; 

    init(); 

    function init() { 
     APIService.getProduct(vm.productId) 
      .then(function (response) { 
       console.log(response); 
       vm.product = response.data; 
      }) 
      .catch(function (error) { 
       console.log("error at GET"); 
      }); 
    } 
}]); 

Answer 1

本该

angular.module('Productportfolio', ['ngRoute']) 

.config(['$routeProvider', function ($routeProvider) { 

    $routeProvider 
     .when('/home', { 
      templateUrl: '/components/home/home.html', 
      controller: 'ProductCtrl', 
      controllerAs: 'ProductCtrl' //modified as your using controller as syntax 
     }) 

     .when('/detail/:productId', { 
      templateUrl: '/components/detail/detail.html', 
      controller: 'DetailCtrl', 
      controllerAs : 'DetailCtrl'  //modify this also    

      //add these lines 
      param:{ 
      productId:null 
      } 
     } 

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

更换你的模块文件

与此

angular.module('Productportfolio') 

.controller('ProductCtrl', ['APIService','$location', function (APIService,$location) { 

    var vm = this; 
    vm.products = null; 

    init(); 

    function init() { 
     APIService.getProducts() 
      .then(function (response) { 
       vm.products = response.data; 
      }) 
      .catch(function (error) { 
       console.log("error at GET"); 
      }); 
    } 

    vm.loadDetail = function(product){ 
     $location.path('/detail/'+product._id); // you missed a slash and the property was wrong 
    } 
}]); 

这是正确的 $ location.path（ '/细节/' + product._id）更换您的ProductCtrl.js;

Answer 2

从div中删除ng控制器并像下面那样更新。

<div > 
    <div ng-repeat="product in vm.products "> 
     <h3>{{product.title}}</h3> 
     <button ng-click="vm.loadDetail(product)">Detailansicht</button> 
    </div> 
</div> 

此外，在航线配置中添加controllerAs：

删除： '虚拟机'

.when('/home', { 
    templateUrl: '/components/home/home.html', 
    controller: 'ProductCtrl', 
    controllerAs: 'vm' 
}) 

更新像

vm.loadDetail = function(product){ 
    $location.path('/detail'+product['_id']); 
} 

Answer 3

编辑 作为@Paulson彼得说功能ng和div控制器更新如下。

<div > 
    <div ng-repeat="product in vm.products "> 
    <h3>{{product.title}}</h3> 
    <button ng-click="vm.loadDetail(product)">Detailansicht</button> 
</div> 

在路由配置

另外补充controllerAs： '虚拟机'

.when('/home', { 
    templateUrl: '/components/home/home.html', 
    controller: 'ProductCtrl', 
    controllerAs: 'vm' 
}) 

如@亚拉文说：

vm.loadDetail = function(product){ 
    $location.path('/detail/'+product._id); //here is the change 
    } 

现在我可以拿到产品的角度变化