Angular Nested Controllers Access ng-repeat data

Question

I have two controllers, one nested inside the other, both using ng-repeat to essentially list arrays of related data. I'd like to access one of the properties in the ng-repeat of the parent controller in the child controller. I'm pretty new to Angular and not sure how to get this working or if I'm approaching it the wrong way. Any guidance would be helpful.

HTML

<div class="container" ng-app="myApp">
    <div class="task" ng-controller="TaskController as taskCtl" ng-repeat="task in tasks">
         {{task.name}}
         <ul>
             <li ng-controller="AttachmentController as attachmentCtl" ng-repeat="attachment in attachments">{{attachment.name}}</li>
         </ul>
    </div>
</div>

JS

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

app.controller('TaskController', ['$scope', function ($scope) {
    $scope.tasks = [{name:'thing1', id: '123456'}, ... ];
}]);

app.controller('AttachmentController', ['$scope', '$http', function ($scope, $http) {
   $scope.attachments = [];

   $scope.init = function init() {
      $http.get('/api/attachments&task_id=' + **HOW_DO_I_GET_TASK_ID_HERE** )
         .then(function(response) {
              $scope.attachments = response.data;
      });
   };

  $scope.init();
}]);

I'd like to load the attachments as they relate to the tasks based on the task id for a given iteration through ng-repeat. Not sure if I'm going about this the wrong way.

Thanks

Since you're using $scope this kind of thing: ng-controller="TaskController as taskCtl" is unnecessary, it should be only ng-controller="TaskController". — developer033
– developer033, Commented Jul 20, 2016 at 21:50
@developer033 Thanks ... not sure I understand why/how using $scope makes that unnecessary. Can you elaborate on that or what the 2 ways are? — chasingtheflow
– chasingtheflow, Commented Jul 20, 2016 at 22:27
@developer033 thanks, that makes the whole issue much more clear. I had combined the two having seen it done both ways but not understanding the differences. — chasingtheflow
– chasingtheflow, Commented Jul 21, 2016 at 12:59

daan.desmedt · Accepted Answer · 2016-07-20 21:48:13Z

1

Although it would be better to use a ng-repeat with a filter on all the attachments with the given id. Since now you are calling the /api/attachments&task_id for each task iteration.

Or to send the list of attachments directly on the /api/tasks call. Therefor you could loop them instantly when looping the tasks, without the need of fetching them on each iteration.

A possible solution according to your code provided:

<div class="container" ng-app="myApp">
    <div class="task" ng-controller="TaskController as taskCtl" ng-repeat="task in tasks">
         {{task.name}}
         <ul>
             <li ng-controller="AttachmentController as attachmentCtl" ng-repeat="attachment in getAttachments(task.id)">{{attachment.name}}</li>
         </ul>
    </div>
</div>


app.controller('AttachmentController', ['$scope', '$http', function ($scope, $http) {
       $scope.getAttachments = function(id) {
          $http.get('/api/attachments&task_id=' + id)
             .then(function(response) {
                  return response.data;
          });
       };
    }]);

answered Jul 20, 2016 at 21:48

daan.desmedt

3,8201 gold badge22 silver badges33 bronze badges

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

3 Comments

chasingtheflow Over a year ago

Thanks. I like your idea for the /api/tasks call. The API doesn't work this way currently, but I could make one that does fairly trivially.

daan.desmedt Over a year ago

If you can combine 1 API call to also include this data, you'll save on speed (since you load all data at once, on not having 1 rest call to get the tasks , and for each task another api call to get the attachements). Let me know if you need any extra help! :)

chasingtheflow Over a year ago

yep, that makes tons of sense and probably the next thing i'll do.

Justin Herter · Accepted Answer · 2016-07-20 21:50:52Z

0

Something like this from the child controller should work: HTML:

<div class="container" ng-app="myApp">
    <div class="task" ng-controller="TaskController" ng-repeat="task in tasks">
         {{task.name}}
         <ul>
             <li ng-controller="AttachmentController" ng-repeat="attachment in fetchAttachments(task)">{{attachment.name}}</li>
         </ul>
    </div>
</div>

JS Child Controller: This fetchAttachments will be called for every iteration of the parent ngRepeat. You will have to "return" the result of the Ajax call to this function for it to work.

$scope.fetchAttachments = function (task) {
    // call ajax 
    // return the result of ajax
}

edited Jul 20, 2016 at 21:50

answered Jul 20, 2016 at 21:38

Justin Herter

6004 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular Nested Controllers Access ng-repeat data

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related