How To Properly Execute A Function Inside Ng-repeat

SITUATION: I am making an app in AngularJs that assign permissions. In order to do this i have three nested ng-repeat. First loop: display PERMISSION GROUP Second loop: For each pe

Solution 1:

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)

<divng-app="app"ng-controller="ctrl"><divng-repeat="category in model.categories"><span> Category: {{ category.name }} </span><png-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;
}}])

Solution 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

<tdclass="lectureClass"ng-repeat="s in sessions"ng-init='presenters=getPresenters(s.id)'>
      {{s.name}}
      <divclass="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' }
        });
    });

Solution 3:

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

Solution 4:

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