0

I have 2 views. View1 and View2. View1 has list of products and checkboxes next to it and submit button. View2 is the page that displays the products selected from view1. My goal is to send the products selected (using checkboxes) from view1 to view2.

Here is my code..

 **<a href="/#/Details/{{cartprd}}" class="bg-white" ng-click="SendToCartPage(cartprd)">{{fff}}</a>**

 <tr>
     <td>
       **<input type="checkbox" ng-click="UpdateCart(tbl, $event)" ng-bind="tbl" id=" {{$index + 1}} " />**
     </td>
     <td>
       <div>
            <div class="thumbnail" ng-mouseover="getproductonhover()">
               <div class="caption">
                  <span class="">{{tbl.ProdName}}</span>
                  <p class="">{{tbl.ProdDescription}}</p>
               </div>
                  <img src="~/Images/imgcamera.jpg" class="imgproduct" />
            </div>
        </div>
      </td>
      <td>{{tbl.ProdName}}</td>
      <td>{{tbl.ProdDescription}}</td>
      <td>
        <a class="btn btn-primary" ng-click="GetSingleProduct(tbl)">Edit</a>
        </td>
  </tr>

Controller.js

app.controller('CartController', function ($scope, $routeParams) {
  $scope.SendToCartPage = function (cartprd) {       
    return cartprd;
}
});

View2

<div ng-controller="CartController">
{{SendToCartPage}} 
</div>

I see an empty page in the view2. Can someone please tell me what mistake I am doing? One thing I noticed is when I make $scope.SendToCartPage = "mystring" then I can see "mystring" in view2.

user3501278
  • 257
  • 1
  • 7
  • 21

2 Answers2

1

To achieve this goal you can use angularjs service which helps to organize and share code across your app.

So create a basic service like this

var appmodule = angular.module('myModule', []);
appmodule.factory('myService', function() {
 var savedCheckedData = {}
 function setData(data) {
   savedCheckedData = data;
 }
 function getData() {
  return savedCheckedData;
 }    
 return {
  set: setData,
  get: getData
 }    
});

So now inject this service in controller.When in view1 you select checkbox push the selected data using setData.And in View2 get the data using getData and display it.

So actually your code would look like this

app.controller('CartController', function ($scope, $routeParams, myService)
{
  $scope.SendToCartPage = function (cartprd) {       
    //get the checkboxes data here and push it        
    myService.set(cartprd);
}
});
Navoneel Talukdar
  • 4,393
  • 5
  • 21
  • 42
0

I believe your issue is that SendToCartPage is a function rather than a value. So in View2, when you tell it to display SendToCartPage, you are not passing it any arguments and therefore not getting any result back.

You could modify SendToCartPage to instead store the argument in a scope variable, like so:

$scope.SendToCartPage = function (cartprd) {       
    $scope.cartContents = cartprd;
}

Then you'd modify your View2 code to look like this:

<div ng-controller="CartController">
    {{cartContents}} 
</div>

I assume you probably want your cart contents to be able to contain several things. In that case, you can modify your function so that cartContents is an array instead (adding the argument to the array each time it is called), and you can use ng-repeat in your view to display each item in the array.

Cole
  • 31
  • 5
  • Yeah, I believe @Neel has a more complete answer to your question. If you have two views associated with two different controllers (each view should have its own controller), then the best way to share data between them is with a service. – Cole Mar 13 '16 at 04:55
  • I have only one controller not two. – user3501278 Mar 13 '16 at 05:00
  • I'd recommend having a separate controller for each view, as this is the best practice, and you can have issues when sharing a controller across different views (see [this answer](http://stackoverflow.com/a/16213055/4797998) for more details). – Cole Mar 13 '16 at 22:17