CODEWITHSUNDEEP
angularjscontrollerangularjs-ng-repeat
konghou
konghou

Reputation: 557

How to look up items with id for one controller from another controller in AngularJS

I have two controllers where the first one contains a list of items:

$scope.items = [{id:1, desc:'desc1'},{id:2, desc:'desc2'}...];

The second one binds to a template which displays a list of items selected:

$scope.myitems = [1,2,3,...]; // ids only

 <div ng-repeat="item in myitems">
   {{item.id}} / {{item.desc}}
 </div>

How can I look up the item desc in the ng-repeat of the second controller from the item list of the first controller?

Upvotes: 0

Views: 139

Answers (4)

Maksym Demidas
Maksym Demidas

Reputation: 7817

You can try to use inheritance concept:

var app = angular.module(....);

app.controller('FirstCtrl ', function($scope) {
  $scope.items = [{id:1, desc:'desc1'},{id:2, desc:'desc2'}...];
});

app.controller('SecondCtrl', function($scope, $controller) {
  $controller('FirstCtrl', {$scope: $scope}); // $scope.items now available

});

Advantage over the $rootScope solution:

  • second controller will always have access to items, even if first controller is not instantiated
  • items array may be changed only by these two controllers, and not anyone other

Main flaw of this approach is that SecondCtrl will have access to any scope variable of the FirstCtrl and not only items array

EDIT. IMHO Factory/Service approach mentioned by @NexusDuck is the best one (composition over inheritance).

Upvotes: 1

Sanjay Parmar
Sanjay Parmar

Reputation: 39

You can use $emit and $on.

EX: In First controller add 

$scope.$emit('eventName', $scope.items);
};

And also pass $scope.items.

In Second Controller Add

$scope.$on('eventName', function (event, args) {
    $scope.items = args;
});

args hold $scope.items value and is assign to $scope.items in second controlle, so now ng-repeat display value of $scope.items of First Controller.

Upvotes: 0

Robin-Hoodie
Robin-Hoodie

Reputation: 4984

Sharing data between controllers is best achieved via services/factories, an alternative is to use scope inheritance.

1. Factory/Service

angular.module('yourModule').factory('itemService', itemService);

    function itemService() {
         var items =  [{id:1, desc:'desc1'},{id:2, desc:'desc2'}...];
         return {
             findItemById: findItemById
         }
         
        function findItemById(id) {
            //logic to find item by id
        }
    }

Inject this factory in your controllers and add more functions if needed.

2. Scope inheritance

The key here is to nest your childcontroller, which I presume is the one with the ids.

<div ng-controller="topCtrl">
   <div ng-controller="childCtrl">
      <div ng-repeat="item in myitems">
         {{item.id}} / {{item.desc}}
      </div>
   
   </div>
</div>

With this option, any controller that is nested within the topCtrl in the view has access to the topCtrl scoped variables.

A third option would be to store the data in the $rootScope, which is actually also a sort of scope inheritance (all scopes except for isolated directive scopes inherit from the rootScope), but that's probably not a good idea for your usecase.

Upvotes: 1

ipln
ipln

Reputation: 113

Can you assign values to $rootScope.items in first controller, then try to access in second controller.

Upvotes: 0

Related Questions