Passing values between html files

Question

I am making a shopping application in ionic/ angular JS. I want to pass a value (name of my subcategory) from my subcategory page to the detail page. Here is my code:

Subcategory.html

<div>
<ion-view view-title="SubCategories">
<ion-list>
<ion-item class="ionitems" ng-repeat="sublist in subCategories" href="#/app/playlists/{{sublist.id}}/details">
{{sublist.name}}

 <!--<a ng-click="godetails();">{{sublist.name}}<a/>-->
 </ion-item>
</ion-list>
</div>

Detail page:

<ion-content>
    <h4>Product Details</h4>
    <ion-view view-title="playlists">
      <ion-content ng-controller="PlaylistCtrl">
        <input type="button" ng-click="addToCart();" value="add cart" />
      </ion-content>

Add to cart controller:

 .controller('detailsCtrl', function($scope){

      var arr = [];

      $scope.addToCart = function () {
      arr.push("");

I need to pass the subcategory name from the subcategory page to detail page and to the add to cart controller. How can I do this?

It has many ways to you can do that, using $rootScope, router param etc.. — Tan Mai Van
– Tan Mai Van, Commented Apr 25, 2016 at 6:26

Devidas Kadam · Accepted Answer · 2016-04-25 06:42:43Z

you can send the subcategory value as URL Parameters, kindly refer this link

from this you have to create a state for detail page

for example

 .state('app.detail', {
    url: "/product/:productId",
    templateUrl: 'detail.html',
    controller: 'detailsCtrl'
 })

in your detailsCtrl controller you will get the value i.e product id, from this you can get the detail and show it to detail page

in controller

 .controller('detailsCtrl', function($scope,$stateParam){
    var productId =  $stateParam.productId;
    //now you get product id , get the detail and show on detail page
  });

your view code for passing url parameters will be

<ion-view view-title="SubCategories">
<ion-list>
<ion-item class="ionitems" ng-repeat="sublist in subCategories">
 <a  ui-sref="detail({productId: sublist.productId})">{{sublist.name}}<a/>
 </ion-item>
</ion-list>

XAVIER K.I · Accepted Answer · 2016-04-25 06:27:50Z

you have to create a service in order get and set the data , like this

   myApp.service('myService', function() {
       var data = "";
       return {
        getData: function() {
          return data;
        },
        setData: function(subcategoryName) {
          data = subcategoryName;
        }
      };
    });

And inject the service in your controller to get the subtitle

   .controller('detailsCtrl', function($scope,myService){

  var arr = [];
// use myService to get the data

var subcategory_name = myService.getData();

  $scope.addToCart = function () {
  arr.push("");

Collectives™ on Stack Overflow

Passing values between html files

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related