Как правильно выполнить функцию внутри нг-повтора

Question

СИТУАЦИИ:

Я делаю приложение в AngularJs, которые присваивают права доступа. Для этого у меня есть три вложенных ng-repeat.

Первый цикл: дисплей РАЗРЕШЕНИЕ GROUP

Второй контур: Для каждого разрешения группы дисплейных КАТЕГОРИЙ. Внутри этого цикл выполняет функцию, которая будет получать все подкатегории для каждой категории

Третьего цикл: дисплея подкатегорий

ВОПРОС:

Проблема заключается в выполнении функции внутри второго цикла.

ПОПЫТКА 1 - нг-INIT:

<div class="row" ng-repeat="permission_group in list_permission_groups"> 
    <div class="col-sm-3"> 
    <h3> 
     {{permission_group.permission_group_name}} 
    </h3> 
    </div> 
    <div class="col-sm-9"> 
    <ul> 
     <li ng-repeat="category in list_categories"> 
     <span> 
      {{ category.name }} 
     </span>    
     <div class="checkbox"> 
      <label>     
      <div ng-init="temp_result = get_Sub_Categories(category.category_id)">     
       <p ng-repeat="sub_category in temp_result"> 
       {{ sub_category.name }} 
       </p>     
      </div>    
      </label> 
     </div>   
     </li> 
    </ul> 
    </div> 
</div> 

В контроллере:

$scope.get_Sub_Categories = function(category_id) { 
    $http({ 

     url: base_url + 'main/json_get_list_sub_categories', 
     data: { 
      category_id: category_id 
     }, 
     method: "POST" 

    }).success(function(data) { 

     return data; 

    }); 

} 

поведение Te довольно странно. Потенциально из-за грязной проверки страница загружается 682 раза. Результат не отображается.

ПОПЫТКА 2 - нг-нажмите: (только для отладки)

<div class="row" ng-repeat="permission_group in list_permission_groups"> 

    <div class="col-sm-3"> 

    <h3> 
     {{permission_group.permission_group_name}} 
    </h3> 

    </div> 

    <div class="col-sm-9"> 
    <ul> 
     <li ng-repeat="category in list_categories"> 
     <span> 
      {{ category.name }} 
     </span> 

     <div class="checkbox"> 
      <label> 

      <button ng-click="get_Sub_Categories(category.category_id)"> 
       GET SUB-CATEGORIES 
      </button> 

      {{ list_sub_categories }} 

      </label> 
     </div> 

     </li> 
    </ul> 
    </div> 
</div> 

В контроллере:

$scope.get_Sub_Categories = function(category_id) { 
    $http({ 

     url: base_url + 'main/json_get_list_sub_categories', 
     data: { 
      category_id: category_id 
     }, 
     method: "POST" 

    }).success(function(data) { 

     $scope.list_sub_categories = data; 

    }); 

} 

На этот раз страница загружена только один раз. Если я нажму кнопку, отображаются соответствующие подкатегории, но, конечно, не только для соответствующей категории, но и для ВСЕГО, потому что я изменяю var в глобальной области.

ЦЕЛЬ:

То, что я хочу, чтобы получить просто отображая все соответствующие подкатегории для каждой категории. Без использования кнопки, но просто посмотрите все необходимое содержимое, как только загрузится страница. Но я не понимаю, как это можно сделать правильно в AngularJs.

ВОПРОС:

Как я правильно выполнить функцию внутри нг-повторить, что возвращение и отображать различные данные для каждого цикла?

EDIT - свалка ПРИМЕРЕ подкатегорий одной категории:

[{ 
    "sub_category_id": "1", 
    "name": "SUB_CATEGORY_1", 
    "category_id_parent": "1", 
    "status": "VISIBLE" 
}, { 
    "sub_category_id": "2", 
    "name": "SUB_CATEGORY_2", 
    "category_id_parent": "1", 
    "status": "VISIBLE" 
}, { 
    "sub_category_id": "3", 
    "name": "SUB_CATEGORY_3", 
    "category_id_parent": "1", 
    "status": "VISIBLE" 
}, { 
    "sub_category_id": "4", 
    "name": "SUB_CATEGORY_4", 
    "category_id_parent": "1", 
    "status": "VISIBLE" 
}] 

Answer 1

Вызов функции внутри ng-repeat такой же, как и обычный. Поскольку вам нужно отображать подкатегории во время загрузки страницы, лучше получить эти данные заранее. Асинхронная загрузка подкатегорий не будет вписываться в этот сценарий.

Здесь минимальный фрагмент кода для достижения этой (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> 

контроллер

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 2

Я думаю, что хорошим решением здесь является использование угловой директивы.

Вы можете увидеть пример директивы, используемой в нг-повторе здесь: Angular Directive Does Not Evaluate Inside ng-repeat

Для получения дополнительной информации о директивах, вы можете проверить официальную документацию: https://docs.angularjs.org/guide/directive

Answer 3

Я бы создать фабрику по категориям, то переместите функцию get_sub_categories на этот новый завод.

Answer 4

Подкатегория пример не работал в моем случае, и он взял мой код в петлю infinte по какой-то причине , может быть, потому что я использовал аккордеон.

Я достиг этого вызова функции внутри нг-повтора, используя нг-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> 

код на стороне контроллера должен выглядеть ниже

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

Хотя API завод выглядит следующим образом:

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' } 
     }); 
    });