erhalten Werte von der Steuerung des angeklickten Elements auf der nächsten Seite in AngularJS

Question

ich in AngularJS auf ein E-Commerce-Portal arbeite, wo ich mehrere Produkte in der Steuerung wie diese

$scope.products = [ 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 14, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 11, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 10, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 9, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 8, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 13, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 12, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 7, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 6, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 3, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 2, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 1, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 5, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 4, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 14, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 11, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 10, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 9, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 8, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 13, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 12, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 7, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 6, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 3, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 2, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 1, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 5, link: '#products_detail'}, 
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 4, link: '#products_detail'}, 
]; 

habe ich bin das Produkt im Hinblick immer mit ng-repeat und es funktioniert gut. Hier ist die URL für die Produktseite http://trendnyou.com/#/products

Jetzt möchte ich dies verlängern, und wenn ich auf klicken jetzt kaufen auf eine beliebige Taste öffnet eine Detailseite Throught routeprovider wo ich brauche, um den Wert von der gleichen holen Controller aber nur des angeklickten Produkts. Hier ist die URL für Details Seite http://trendnyou.com/#/products_detail

Im Moment ist dies eine Dummy-Seite mit gleichen Daten, egal auf welches Produkt Sie klicken Ich möchte nur die Daten des angeklickten Produkts anzeigen.

Answer 1

ich fount eine einfachste Art und Weise, die gut für mich arbeitet

Machen Sie eine Funktion, bei der Speicherung des Index des klickten Element wie dieses

$scope.storeSelectedProduct = function(){ 
    localStorage.selectedProduct = this.$index; 
} 

und läuft diese Funktion auf ng-click des Produkts und Speichere den Index in den lokalen Speicher, damit der Wert beim erneuten Laden der Seite nicht verloren geht.

Nun, wenn Seitenwechsel i eine Funktion mit ng-init bin Initialisierung den Wert auf lokalen Variable

$scope.getSelectedProduct = function(){ 
    $scope.selectedProduct = localStorage.getItem('selectedProduct'); 
} 

jetzt bekommen ich mit Task nur die Details geklickt Elements zeigt gelassen, dass ich ng-repeat bin mit mit Scheibe und ich erhalte alle Werte aus dem gleichen Controller, sondern aus dem geklickten Elemente immer die Werte aus dem gleichen Controller, von dem ich bin Wert in Produktliste Seite

ng-repeat="product in products.slice('selectedProduct','selectedProduct+1')" 

Damit immer nur Inste Wenn ich alle Werte im lokalen Speicher ablege, speichere ich nur den Index.

Answer 2

Schreiben Sie das ng-click-Ereignis für den Link, auf den Sie klicken, und speichern Sie die spezifischen Produktdetails in einem lokalen Speicher und leiten Sie dann zum entsprechenden Speicherort um. Im products_detail-Controller können Sie erneut von localstorage lesen und es rendern.

function storeSelectedProduct(){ 
     localStorage.setItem('selectedProduct',obj);   
    } 

    $routeProvider.when("/products_detail", { 
      controller: "productdetailcontroller", 
      templateUrl: "detail.html", 
      resolve: { 
       "selectedProduct": function() { 
        return localStorage.getItem('selectedProduct'); 
       } 
      } 
     }); 
app.controller("productdetailcontroller", function ($scope, selectedProduct) { 
      $scope.selectedProduct = selectedProduct; 
     }); 

Jetzt können Sie das ausgewählte Produkt aus dem aktuellen Umfang lesen.