Bonjour,

J'essai de réaliser un questionnaire, les technos que j'utilise sont nodejs, angularjs et mongodb.. (je débute!)

Je rencontre un petit problème avec mon code html, en effet au niveau des questions, je souhaiterai les afficher une par une avec un boutton suivant qui permet d'aller à la question suivante etc..

J'ai réussi à afficher une seule question à la fois en bricolant.. mais lorsque je click sur suivant la question suivante apparait (et la première disparait) mais elle fait un saut de ligne.. à chaque fois que je click sur suivant cela se produit.. du coup au lieu d'avoir les questions au même endroit celles-ci descendent à chaque click

Merci d'avance pour votre aide.

Mon HTML:

    <div class="col-lg-12">
        <div class="content-box">
            <h2 class="content-box-header bg-psf-dark">
                Questionnaire
            </h2>
            <div class="content-box-wrapper pad15A animated fadeIn">
                <!--{{questionnaires}}-->
                <div ng-repeat="questionnaire in questionnaires track by $index">
                    <div class="row" ng-hide="!$first">
                        <h3>{{questionnaire.nom}}</h3>
                        <p>Nombre de questions: <span class="badge">{{questionnaires.length}}</span></p>
                        <br>

                    <!--Questions-->
                        <div ng-repeat="q in questionnaire.questions">
                            <div ng-hide="!$first">
                                <div ng-if="numeroQuestion === q.order">
                                    <h4>{{q.order+ "- " + q.question}}</h4>
                                        <div ng-repeat="r in q.reponses track by $index">
                                            <div class="checkbox checkbox-success" data-placement="bottom-left">
                                                <label class="pad0L">
                                                    <input type="checkbox" id="{{r.code}}" class="custom-checkbox"/>
                                                    {{r.reponse}}
                                                </label>
                                            </div>
                                        </div>

                                    <div class="next clearfix">
                                        <br>
                                        <button class="btn btn-info pull-right mrg25R" ng-click="questionSuivante();">Suivant &nbsp; <i class="glyphicon glyphicon-chevron-right"></i></button>
                                        <button class="btn btn-info pull-left mrg25R" ng-click="questionPrecedente();"><i class="glyphicon glyphicon-chevron-left"></i>&nbsp;Precedent</button>
                                        <button class="btn btn-info pull-right mrg25R" ng-click="addReponses();"><i class="glyphicon glyphicon-save"></i>&nbsp;Enregistrer</button>
                                    </div>

                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>

3 réponses


Nadjeem86
Auteur
Réponse acceptée

Bonjour,

J'ai trouvé une solution à mon problème en me basant sur ce post :

https://www.bennadel.com/blog/2784-animating-a-single-item-using-ngrepeat-and-nganimate-in-angularjs.htm

Bon dev à vous !

Salut,
Pourquoi un repeat vu que tu les affiches une par une ?

Merci pour ta réponse.

Je pensais faire un ng-repeat pour avoir toutes les questions/reponses dans un premier temps et les cacher avec un ng-if..

Tu vois une autre solution? Peux-tu m´expliquer.. ? Merci d´avance