How do i pass an item between views with AngularJS?

Question

I'm playing around with ngRoute and Angular and it seems that I have an issue when trying to chose an item in a view, in order to go to a details page with the coshed item:

<h1>Select Item</h1>
<ul>
   <li ng-repeat="item in vm.items">
      <a ng-click="vm.setSelectedItem(item)" ng-href="#/first/{{item.id}}">
           {{item.thing}}
      </a>
  </li>
</ul>

How come the vm.selectedItem is not rendered/shown on the "details" page?

var app=angular.module("myApp", ['ngRoute']);

app.config(function($routeProvider){
    $routeProvider
    .when('/first', { 
        templateUrl: 'first.html', 
        controller: 'FirstCtrl',
        controllerAs:'vm' 
    })
    .when('/first/:id', {
        templateUrl: 'firstWithItem.html', 
        controller: 'FirstCtrl',
        controllerAs:'vm'
     })
    .otherwise({ 
        redirectTo: '/first' 
    });
});

app.controller("FirstCtrl", function() {
    var vm = this;

    vm.items = [{id:1, thing:"Beer"},{id:2, thing:"Grass"}];
    vm.selectedItem = null;
    vm.setSelectedItem = SetSelectedItem;

    function SetSelectedItem(item) {
        this.selectedItem = item;
    }
});

Link to JSfiddle Here

Omri Aharon · Accepted Answer · 2015-02-26 12:43:18Z

3

You don't see the change because when you switch views, a new instance of the controller is initiated, and you don't know what you picked.

Since you're using $routeProvider, you can use $routeParams and use that to fetch your id parameter:

app.controller("FirstCtrl", function($routeParams) {
    var vm = this;

    vm.items = [{id:1, thing:"Beer"},{id:2, thing:"Grass"}];
    vm.selectedItem = null;

    if ($routeParams.id) {      
        SetSelectedItem($routeParams, vm);
    }

    function SetSelectedItem(item, obj) {
         obj.selectedItem = findItem(item.id, obj.items);
    }

    function findItem(id, array) {
        var res;
        for (var i = 0; i < array.length; i++ )
        {
            if (array[i].id == id) {
                return array[i];
            }
        }
    }
});

Working Fiddle

answered Feb 26, 2015 at 12:43

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vinay K · Accepted Answer · 2015-02-26 12:33:35Z

0

FirstCtrl will be instantiated one more time when the view is changed.

Instead of setting the selectedValue in the controller's scope. Set it on the rootScope and use it.

Here is the updated fiddle. http://jsfiddle.net/k66Za/89/

answered Feb 26, 2015 at 12:33

Vinay K

5,5721 gold badge20 silver badges27 bronze badges

Comments

KungWaz · Accepted Answer · 2015-02-26 12:40:17Z

0

You can remove the controller initiation from the routes and add it to the top of the application as in this fiddle: Fiddle update

Then it will be only initiated once.

Edit in JS

app.config(function($routeProvider){
    $routeProvider
    .when('/first', { 
        templateUrl: 'first.html'
    })
        .when('/first/:id', {
        templateUrl: 'firstWithItem.html'
    })
    .otherwise({ 
        redirectTo: '/first' 
   });
});

Edit in HTML

<div ng-app="myApp" ng-controller="FirstCtrl as vm">

answered Feb 26, 2015 at 12:40

KungWaz

1,9663 gold badges43 silver badges65 bronze badges

Collectives™ on Stack Overflow

How do i pass an item between views with AngularJS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related