AngularJs ng-repeat ?!

Hello,

I’m trying to make a questionnaire, the technos I use are nodejs, angularjs and mongodb… (I’m starting!)

I have a little problem with my html code, in fact at the level of questions, I would like to display them one by one with a next button that allows to go to the next question etc…

I managed to display only one question at a time while tinkering… but when I click on the next question appears (and the first one disappears) but it makes a line break… every time I click on it happens… so instead of having the questions at the same place they go down to each click

Thank you in advance for your help.
Ps; sorry for my english :blush:

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

Hi,

Here’s a simple example of basic pagination with AngularJS.

Hopefully you can adapt that to your needs. To make this, I just tweaked the accepted answer from this SO question:

It’s also extensible in that you can adjust the pageSize variable and display more than one question at once.

One question. Why are you starting out with AngularJS? Angular (as it’s now known) was a complete rewrite of AngularJS and although there are plenty of AngularJS apps out there, most (all?) new apps are being created with Anular. There is also a lot more support, documentation and tutorials for Angular (now at version 4).

I’m not saying don’t learn AngularJS, rather just think about your end use case and what you want to accomplish.

1 Like

Hello and thank you for your answer,

about technology, I had no choice because I’m currently doing an internship.

As for the code, I found a solution that you will find in this link.

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

Thank you again!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.