Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je souhaite afficher les collaps bootstrap avec des données récupérés depuis un tableau qui contient des entrées que j'appelle partie.

Jusqu'à là tous va bien.

Mais dans le code bootstrap je dois par exemple

 {% for partie in parties %}
                                    <!-- Début titre de la partie-->
                                    <div class="card-header" id="heading_1" style="word-wrap: break-word; text-overflow: ellipsis;">
                                            <h5 class="mb-0">
                                                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse_1" aria-expanded="true" aria-controls="collapse_1">
                                                    <h2>{{ partie.nomPartie }}</h2>
                                                    <h3>{{ partie.titre }}</h3>
                                                </button>
                                            </h5>
                                    </div>

Ce que je veux

à la place de data-target="#collapse1" par exemple, je voudrait remplacer le "1" de #collapse par l'id de la partie.

Si par exemple l'id de la partie est 3 alors ça va dynamiquement donner #collapse_3 à la place de #collapse_1

Ce que j'obtiens

Quand j'essaie de con concatener avec le code suivant :


                                    {% set Num = {{partie.id}}%}
                                    <!-- Début titre de la partie-->
                                    <div class="card-header" id="{{heading_ ~ Num}}" style="word-wrap: break-word; text-overflow: ellipsis;">
                                            <h5 class="mb-0">
                                                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#{{collapse_ ~ Num}}" aria-expanded="true" aria-controls="{{collapse_ ~ Num}}">
                                                    <h2>{{ partie.nomPartie }}</h2>
                                                    <h3>{{ partie.titre }}</h3>
                                                </button>
                                            </h5>
                                    </div>
                                    <!-- Fin  titre de la partie-->
                                    <!--Début boutons chapitres de la partie-->
                                    <div id="{{collapse_ ~ Num}}" class="collapse hide" aria-labelledby="{{heading_ ~ Num}}"

ça me renvoie l'erreur suivant :

A hash key must be a quoted string, a number, a name, or an expression enclosed in parentheses (unexpected token "punctuation" of value "{".

Comment puis-je résousoudre ce problème et récupérer dynamiquement les attributs ?

2 réponses


Lartak
Réponse acceptée

Bonjour, tu t'embète trop, il te suffit par exemple de faire :

<div class="card-header" id="heading_{{ Num }}" style="word-wrap: break-word; text-overflow: ellipsis;">
    <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse_{{ Num }}" aria-expanded="true" aria-controls="collapse_{{ Num }}">
            <h2>{{ partie.nomPartie }}</h2>
            <h3>{{ partie.titre }}</h3>
        </button>
    </h5>
</div>

Et puis ce n'est pas :

{% set Num = {{partie.id}}%}

Là c'est comme si en PHP tu faisais :

<?php $num = echo $partie->id; ?>

Mais :

{% set Num = partie.id %}
Devdeb22
Auteur

Un grand merci effectivement je me prenais un peut trop la tête. Merci Lartak