Einen Artikel aus ng-repeat bekommen

Question

Ich habe eine Homepage mit verschiedenen Produkten und möchte ein ausgewähltes Produkt in einer anderen Ansicht anzeigen. (die Detailansicht) Um die Produkte zu zeigen, verwende ich ng-repeat, die über ein Produkt-Array iterieren.

Jetzt bekomme ich ein einzelnes Produkt aus der ng-Wiederholung, wenn ich einen Knopf klicke. Dann wechselt die Ansicht mit dem gewählten Produkt in die Detailansicht. Der Wechsel der Ansichten sollte über die ID gehen, da diese benötigt wird, um eine Anfrage an meine API zu stellen.

In diesem Zustand habe ich es mit $ routeParams versucht, aber es funktioniert nicht. Dann habe ich hier auf stackoverflow gesucht. Ich habe gelesen, dass es Scope-Problem sein könnte, weil ich versuche, die ID in einen Controller zu übergeben. (Und ich brauche diese ID in einem anderen Controller). Wenn ich auf den Button auf der Homepage klicke, passiert nichts.

Ich hoffe, dass jemand eine Idee hat, wie man dieses Problem löst.

Hier ist eine stample JSON-Datei der API:

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

Hier ist mein Code:

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

Ersetzen Sie Ihre Moduldatei mit dieser dieser

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'}); 
}]); 

Ersetzen Sie Ihre ProductCtrl.js mit diesem

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 
    } 
}]); 

ist dies der richtige $ location.path ('/ detail /' + product._id);

Answer 2

Entfernen Sie den ng-Controller von div und aktualisieren Sie ihn wie folgt.

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

Auch in Route-Konfiguration hinzufügen controllerAs: 'vm'

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

Aktualisieren Sie die Funktion wie

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

Answer 3

bearbeiten Wie @Paulson Peter sagte:

Remove ng-controller von div und Update wie unten.

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

Auch in Route-Konfiguration hinzufügen controllerAs: 'vm'

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

Wie @ Aravind sagte:

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

Jetzt kann ich das Produkt ein wechselt die Ansicht erhalten