How to properly execute a function inside ng-repeat

Question

SITUATION:

I am making an app in AngularJs that assign permissions. In order to do this i have three nested ng-repeat.

First loop:

Answer 1

I would create a factory for category then move your get_sub_categories function into this new factory.

Answer 2

The subcategory example did not work for my case and it took my code into an infinte loop for some reason. may be because i was using an accordion.

I achieved this function call inside ng-repeat by using ng-init

<td class="lectureClass" ng-repeat="s in sessions" ng-init='presenters=getPresenters(s.id)'>
      {{s.name}}
      <div class="presenterClass" ng-repeat="p in presenters">
          {{p.name}}
      </div>
</td> 

The code on the controller side should look like below

$scope.getPresenters = function(id) {
    return SessionPresenters.get({id: id});
};

While the API factory is as follows:

angular.module('tryme3App').factory('SessionPresenters', function ($resource, DateUtils) {

        return $resource('api/session.Presenters/:id', {}, {
            'query': { method: 'GET', isArray: true},
            'get': {
                method: 'GET', isArray: true
            },
            'update': { method:'PUT' }
        });
    });

Answer 3

Calling a function inside ng-repeat is same as normal one. Since you need to display the sub categories at the time of page loading its better to get these data beforehand. Asynchronously loading sub categories will not fit into this scenario.

Here is a minimal snippet achieving this (JS Fiddle)

<div ng-app="app" ng-controller="ctrl">
    <div ng-repeat="category in model.categories"> <span> Category: {{ category.name }} </span>

      <p ng-repeat="subCategory in getSubCategories(category.Id)">{{ subCategory.name }}</p>
   </div>
</div>

Controller

angular.module("app", [])
.controller('ctrl', ['$scope', function ($scope) {
$scope.model = {
    categories: [{
        "Id": 1,
        name: '1'
    }, {
        "Id": 2,
        name: '2'
    }],
    subCategories: [{
        "parentId": 1,
        name: 'a1'
    }, {
        "parentId": 1,
        name: 'a2'
    },
                   {
        "parentId": 2,
        name: 'a3'
    }]
}
$scope.getSubCategories = function(parentId){
    var result = [];
    for(var i = 0 ; i < $scope.model.subCategories.length ; i++){
        if(parentId === $scope.model.subCategories[i].parentId){
            result.push($scope.model.subCategories[i]);               
        }
    }
    console.log(parentId)
    return result;
}}])

Answer 4

I think that the good solution here is to use Angular Directive.

You can see an example of directive used in a ng-repeat here : Angular Directive Does Not Evaluate Inside ng-repeat

For more information on directives, you can check the official documentation : https://docs.angularjs.org/guide/directive