CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10207

get values from controller of the clicked element on the next page in angularjs

I am working on an ecommerce portal in angularjs where i have multiple products in controller like this

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

I am getting the product in view with ng-repeat and its working fine. Here is the URL for the product page http://trendnyou.com/#/products

Now i want to extend this and when i click on buy now on any button it opens a detail page throught routeprovider where i need to fetch the value from the same controller but of the clicked product only. Here is the URL for details page http://trendnyou.com/#/products_detail

Right now this is a dummy page with same data no matter on what product you click i want to show the data of the clicked product only.

Upvotes: 2

Views: 77

Answers (2)

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10207

I fount a simplest way which is working fine for me

Make a function in which store the index of the clicked element like this

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

and running this function on ng-click of the product and storing index to localstorage so that value will not vanished on the page reload.

Now when page change i am initialising a function with ng-init to get the value to local variable

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

now i left with task showing the details of clicked element only for that i am using ng-repeat with slice and getting the values from the same controller from which i am getting values in product listing page

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

With this i am getting all the values from the same controller but from the clicked element only instead storing all the values in localstorage i am just storing the index.

Upvotes: 0

Pradeep
Pradeep

Reputation: 4872

Write ng-click event for the link you click and store the specifc product detail into a localstorage and then redirect to the respective location. In products_detail controller you can read again from localstorage and render it.

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

Now you can read the selected product from current scope.

Upvotes: 1

Related Questions