CODEWITHSUNDEEP
jqueryangularjsangularjs-scopeangularjs-ng-repeat
user3501278
user3501278

Reputation: 267

Unable to Pass data between two views from one controller in AngularJS app

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.

Upvotes: 0

Views: 287

Answers (2)

Navoneel Talukdar
Navoneel Talukdar

Reputation: 4608

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

Upvotes: 1

Cole
Cole

Reputation: 41

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.

Upvotes: 0

Related Questions