web-dev-qa-db-fra.com

Comment exécuter correctement une fonction dans ng-repeat

SITUATION:

Je crée une application dans AngularJs qui attribue des autorisations ..__Pour ce faire, j'ai trois répétitions imbriquées.

Première boucle: affiche le groupe de permission

Deuxième boucle: pour chaque groupe de permissions, affichez CATEGORIES. À l’intérieur de cette boucle, exécute une fonction qui va obtenir toutes les sous-catégories pour chaque catégorie

Troisième boucle: affiche les sous-catégories

PROBLÈME:

Le problème réside dans l'exécution de la fonction à l'intérieur de la deuxième boucle.

TENTATIVE 1 - ng-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>

Dans le contrôleur:

$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;

    });

}

Le comportement est assez étrange. Porbably en raison de la vérification, la page est chargée 682 fois. Aucun résultat n'est affiché. 

ATTEMPT 2 - ng-click: (uniquement pour le débogage)  

<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>

Dans le contrôleur:

$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;

    });

}

Cette fois, la page est chargée une seule fois . Si j'appuie sur le bouton, les sous-catégories appropriées sont affichées MAIS bien sûr, non seulement pour la catégorie correspondante, mais POUR TOUT, car je modifie le var dans la portée globale.

LE BUT:

Ce que je veux obtenir, c'est simplement afficher toutes les sous-catégories appropriées pour chaque catégorie. Sans utiliser de bouton, mais simplement voir tout le contenu correct dès le chargement de la page . Mais je ne comprends pas comment cela peut être fait correctement dans AngularJs.

LA QUESTION:

Comment puis-je exécuter correctement une fonction dans un ng-repeat qui retourne et affiche des données différentes pour chaque boucle?

EDIT- DUMP EXEMPLE DE SOUS-CATÉGORIES POUR UNE CATÉGORIE:

[{
    "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"
}]
javascriptphpangularjsangularjs-ng-repeat
16
FrancescoMussi

Appeler une fonction dans ng-repeat est identique à la normale. Etant donné que vous devez afficher les sous-catégories au moment du chargement de la page, il est préférable d’obtenir ces données au préalable.

Voici un extrait minimal réalisant ceci ( 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>

Manette

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;
}}])
11
Amitesh

L'exemple de sous-catégorie n'a pas fonctionné pour mon cas et il a pris mon code dans une boucle infinie pour une raison quelconque. peut-être parce que j'utilisais un accordéon.

J'ai réalisé cet appel de fonction dans ng-repeat en utilisant 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>

Le code du côté du contrôleur devrait ressembler à celui ci-dessous

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

Alors que la fabrique d’API se présente comme suit:

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

Je voudrais créer une fabrique pour la catégorie puis déplacer votre fonction get_sub_categories dans cette nouvelle fabrique 

0
JayMc

Je pense que la bonne solution ici est d'utiliser la directive angulaire.

Vous pouvez voir un exemple de directive utilisée dans une répétition-ng ici: La directive angulaire n'est pas évaluée à l'intérieur d'une répétition-ng

Pour plus d'informations sur les directives, vous pouvez consulter la documentation officielle: https://docs.angularjs.org/guide/directive

0
Quentin Leonetti