Ionic android app getting really really slow while ng-repeat of more that 100 items


#1

I have a code for rendering 38 list items with around 100 data sets rendering at a time. It really makes the app slow and stuck while rendering that particular state. I tried with making the list display with infinite scroll but still it it is slow as a tortoise. What to do ? please help me …


#2

On smartphone or desktop? Try use trackBy and improve your repeated html code (reduce weight)


#3

Both in smartphone and desktop


#4

I have about 200 items without problems.


#5

please let me know how can i proceed it. coz as soon as i click the button the whole app freezes and loads the contents around 10 secs later …


#6

Can you post the code of your list items? That will make it easier to analyze the problem. :slight_smile: For example; rendering images in list items can be heavy.


#7
<ion-list>
  <br><br>
  <ion-item style="background: transparent;border: none;" class="list card padding" ng-repeat="x in myData track by myData.id">
    <div class="item item-avatar">
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Njg4QjNCNTAxMDVEMTFFNjgzNzFBMzhBMDQxRUMyQ0UiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Njg4QjNCNEYxMDVEMTFFNjgzNzFBMzhBMDQxRUMyQ0UiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiBXaW5kb3dzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9Ijc5N0IwNDk5NzQ1ODUzNUQwMzI2Q0ZGNEI2MEY3MzZCIiBzdFJlZjpkb2N1bWVudElEPSI3OTdCMDQ5OTc0NTg1MzVEMDMyNkNGRjRCNjBGNzM2QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgKCTqUAAAGAUExURSUpNY5zRsqRYHdOKpWHdK1sNHqCm6qqrKyahIqGlZBoOlVjiENTeaOVe/z9+5ubmrGysy04VIiHiaWkqTBFdNDV0K2tsEtchU00H5KTlLGtq6OippSSmpyiqah2SXd3h2lpdbWFVaGepXp5eh4hLqejnGFri4haMJORip6coYyPknh5kbOwrZqZlREUG7q6uRUwaxUZI5N4XUZISRseKaaprQICAxMWIWZkZpyZol1ALpiSniIlMb1zLpGLmoB/kFRUXCsjGyE5cFxidaqwurKonpSao5WTovPz7SovOjg+SR8tUF1SQhkcJnB5lXx0bWtwiZSWmubn45eWk7W2uktLUaqmpDU2PoGOp6enqhARF7Cvs29telZNQD0tJLe0sp+cpJqWoK2rpyUbFZ2bo3BaP5qZng4VIpifp56puY2guHFubgoOGh8VIBIQDpudoJiYmRgZKT86QCIfIKVlJY6RnpWKfsfJxbu8vqCemoCAgbW4seDf2ztPexAPFg0PIFuC08UAAAQISURBVHjaZJMJX9pIGIeH5RIBOQURihDOIGAjEUTCbaUeUagHBhWR5VhrV6BoFVr0q/edCej2t0+uyeSZ/zsTCKqiXbRLqFb3RKrVaQdsu9PHVYR4nmVZr9fLceIAhJCXwEEX5+V5fsgOeYR2WXYqgjE1OeLBSBjC8jgJizz7Z+JU5LDIcSzLMKAykMIMmMGAxy4nRoInDoXiXvCARAKeJQgMMXF57A0YniWVWD4RrUWj0doQcYkoEQfsYFoQpsXgelAJDhBrsGNRTGR4cabeWTlSEYC4Wu2FfRcHUAiH4jzSAWcoBpHRPxNhSbAonoV6iZlIGiR0CIuBHtw7wMtnmG6i+/rt2+trt5t4i4B5erGIb7vdaBeMl3+5+vctYKk+jHahaFScZ41FVfJm8VtB9S2J+y8CXNzu9l5sLwacArEcGnvGgNGz7iSGO52WP6TTsKfdNkIwGAoajUEUbjab4U9at9PplGMpIF2XLAFbUqdWK5Oty3y+0WgU8aGf4fD1nDwQkKfl0qX8fTw+XlgwxjH5dlsq3dr64RtFIpERul4Oj6RSuVyaJ0/jsQUgF4cRebympfrRmS4SOdaBeC17CNTjM4xYDEKj9nc+j/fNN3F5bin+juUz8PNevLkHxj7wxMSj/3jx0Zcvv349Vcaeu82rWD0+vMMzxGK4eUGdDl9mEdXI4uLiU/gTIbg5MIx1un6/ghObyuWwL3h0RRZzXz9Ye3rSa+e02h9HOcP+/r4hpINAnHh25vPJroZvtWPHIY9MdpfbMxgMk6LLE4xoMXgxyyrz/juGYtFVtprNZo26KNPOAaDJQGxaRppC4eOMyfnXr+fWQqEAon8eI5HMS+bXkV65/Kgxmwsz/Le327cKCJwUyyuS+fm2NPDwEAg4QbSU1FbNZGKemDGKbeBcM9Fo/MasROKUiLixmCyrrWqr1arRwOl8++REvwMNa7nvyH2/OjiAvd1uY5HKltVYJJyvPT9f7+CRZZpeKRaLuVzuNAb/RxAFVXYVVBHFyfPz2iM0/Kt0a+Xy8tLlunO5Nj0gCspWJptdPSz7AfXhxtqaReEvl1dUFBXKYvUSTBAFpWBqpDIZlUqxegiULJaWYjWrUjkouldxhFQqYxY+AXQhCEqTiUqmMiCDrSpRVAmuGUeHpmi6Bz/1scMRsk1Fu73RSt6kUqlM6abVukk5HI6bVqNB050+AF9OH1kEwYSx2ymKajSSyQZckp1kErwG3ep0+pWKzRbqI6V96tlFlbLDRs/odToVBwSGKshiMgnvzNrTkfYPdK+Hq9t06MRCuMDo9Xo4SBP3KZXKDUHAlXT9EV7MBgF6lWILB89m0+v1dL3Q2GNDGx/+zz+YHUyl8vgYwth+CzAAdLNRN1xALcAAAAAASUVORK5CYII=">
      <h2>{{x.eventname}}</h2>
      <p>{{x.domain}}</p>
    </div>
    <div class="item item-body">
      <center>
        <p>VENUE: {{x.venue}}</p>
      </center>
      <ion-list>
        <div ng-repeat="group in groups">
          <ion-item ng-if="x.id == group.name" class="item-stable button button-block button-positive" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}">
            <i class="icon" ng-if="x.id == group.name" ng-class="isGroupShown(group) ? 'ion-chevron-up' : 'ion-chevron-down'"></i> &nbsp;
            <span style="text-align:center"> More on {{x.eventname}} </span>
          </ion-item>

          <ion-item ng-if="group.name == 1" style="white-space:normal;text-align:justify;" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants-6+1 (rolling substitute) +1 (in case of injury).</li>
              <li> Each innings will be of 4 overs</li>
              <li>The event will be only for boys.</li>
              <li>The whole team must be wearing the same uniform.</li>
              <li>Other details will be given on the spot.</li>
            </ol>
          </ion-item>

          <ion-item ng-if="group.name == 2" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li> Number of participants-7+6.</li>
              <li>Duration- 30 minutes consisting of two equal halves.</li>
              <li>Roll-in substitution allowed.</li>
              <li>No offside rules</li>
              <li>Separate event for boys and girls.</li>
              <li>Dress Code- school football jersey with shorts and football boots, shin guards and stockings are compulsory</li>
              <li>If the match ends in a draw, then direct penalty shootouts will take place.</li>
              <li>Referee’s decision is final.</li>
              <li>If fewer teams are participating then league and knockout format will be followed else knockout format will be followed.</li>
            </ol>
          </ion-item>


          <ion-item ng-if="group.name == 3" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants-5+3.</li>
              <li>Duration- 20 minutes consisting of two equal halves.</li>
              <li>Jerseys should have a clear numbering on the back as well as in the front.</li>
              <li>Separate event for boys and girls.</li>
              <li>The kit number should be from 4 to 15. Players without the mentioned jersey number will not be allowed.</li>
              <li>The same jersey number should</li>
              <li>Roll-in substitution allowed.</li>
            </ol>
          </ion-item>


          <ion-item ng-if="group.name == 4" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants: 10+2.</li>
              <li>Participants need to wear their school sports uniforms.</li>
              <li>Other rules to be explained on the spot.</li>
            </ol>
          </ion-item>



          <ion-item ng-if="group.name == 5" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants – 3 (2 singles, 1 doubles pair).</li>
              <li>No individual matches. All matches are played in ‘teams’.</li>
              <li>Matches will be of 11 points.</li>
              <li>All rules and regulations of TTFI to be followed.</li>
              <li>Separate events for boys and girls.</li>
              <li>Only the finals will be of a best-of- five match (4 singles and 1 double).</li>
            </ol>
          </ion-item>

          <ion-item ng-if="group.name == 6" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li> Number of participants- 2 + 1(reserved)</li>
              <li>Participants are to bring their own kit.</li>
              <li>Matches will be of one set each.</li>
              </li>Sets will be played on the basis of 6 all tiebreakers.</li>
              </li>2 single matches will be played</li>
              <li>In case of a tie, a doubles match will be played as a decider</li>
              </li>Separate events for boys and girls.</li>
            </ol>
          </ion-item>


          <ion-item ng-if="group.name == 7" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants-6+3.</li>

              <li>Matches will be on knock out basis.</li>

              <li>Boys: Set length 25 points.</li>

              <li>Girls: Set length 15 points.</li>

              <li>Winning team must have a lead of 2 points or else the match will continue (in case of tie).</li>

              <li>Dress code- School sports jersey.</li>
            </ol>
          </ion-item>


          <ion-item ng-if="group.name == 8" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants-1.</li>

              <li>This event consists of the activities of cycling, swimming and running.</li>
              <li>The event starts off with cycling, followed by running, and ends with swimming.
              </li>
              <li>Cycling – 800m for boys &amp; girls</li>
              <li>Running – 600m for boys &amp; 400m for girls</li>
              <li>Swimming – 50m for boys &amp; 25m for girls</li>
              <li>A total of 8 participants will qualify after the prelims are done.</li>
              <li>The finals will be held on the third day of the fest.</li>
              <li>Event to be held separately for boys and girls.</li>

            </ol>
          </ion-item>


          <ion-item ng-if="group.name == 9" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants- 1</li>

              <li>15 minute each for a maximum of 5 rounds.</li>
              <li>All other laws of FIDE will be applied.</li>
              <li>There will only be one combined tournament for boys &amp; girls</li>
              <li>Participants must be in their school uniform and must carry their school id card
              </li>

            </ol>
          </ion-item>



          <ion-item ng-if="group.name == 10" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants- 2.</li>
              <li>Matches will be on knock out basis.</li>
              <li>Separate event or boys and girls.</li>

              <li>It will be a 10-meter distance competition.</li>

              <li>It will be a 3 round competition.</li>

              <li>In each round, everybody will shoot 3 arrows within 2 minutes.</li>

              <li>One round will be considered for trials (boys and girls).</li>

              <li>Referee’s decision shall be final.</li>
            </ol>
          </ion-item>


          <ion-item ng-if="group.name == 11" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">

              <li>Number of participants – 1.</li>

              <li>Duration- 30 seconds, per topic.</li>

              <li>The moderators shall provide the participants with their stances.</li>

              <li>A change in topic will occur once 30 seconds of the respective topic have been exhausted.

              </li>

              <li> Total number of topics will be twice the number of the participating schools.</li>

              <li>Each school will get two topics on which it shall start the round.</li>

              <li>Any use of obscene or inappropriate language shall not be entertained and shall lead to immediate disqualification.</li>

              <li>Judging Criteria:</li>

              <li>Creativity.</li>

              <li>Content.</li>

              <li>Delivery.</li>
            </ol>
          </ion-item>



          <ion-item ng-if="group.name == 12" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">

              <li> Number of participants- 1.</li>

              <li>Duration- 1 minute.</li>

              <li>Participants must display originality.</li>

              <li>The skill that is displayed must not be dangerous.</li>

              <li>Participant should not exceed the time limit of a minute.</li>

              <li>Judging criteria:</li>
              <li> Composition.</li>

              <li>Development of ideas.</li>

              <li>Skill, technique and process.</li>

              <li>Depth and breadth of composition.</li>

              <li>Presentation of work.</li>

            </ol>
          </ion-item>




          <ion-item ng-if="group.name == 13" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">

              <li>Number of participants – 5+2.</li>

              <li>Duration - 3+1 minutes.</li>

              <li>No additional time shall be provided.</li>

              <li>Any kind of inappropriate language or obscene content shall lead to expulsion from the stage.</li>

              <li>The schools must get their own props for the acts.</li>

              <li> No particular theme or topic shall be provided. The participants are free to make acts as per their wish.</li>

              <li> Judging Criteria:</li>

              <li> Creativity.</li>

              <li> Content.</li>

              <li>Delivery.</li>

            </ol>
          </ion-item>




          <ion-item ng-if="group.name == 14" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">

              <li>Number of participants – 2.</li>
              <li> The quiz will be based on general knowledge and will not be subject specific.</li>

              <li> There will be a preliminary written quiz, which will be timed as well.</li>

              <li> On the basis of the written quiz, the teams entering the final quiz will be selected.

              </li>

              <li> Only 8 teams will be selected for the final quiz.</li>

              <li> The rules of the various rounds of the final quiz and their respective pointing systems will be informed to the teams on the floor prior to the quizzing.</li>

              <li> As always, the quiz masters decision shall be final.</li>

            </ol>
          </ion-item>



          <ion-item ng-if="group.name == 15" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">

              <li>Number of participants - 8+4.</li>

              <li>Duration- 6+2 minutes.</li>

              <li>Points shall be deducted for exceeding the time limit.</li>

              <li>Vulgarity of any kind will not be entertained and will lead to disqualification.</li>

              <li>School representatives must have a back-up CD or external storage device.</li>

              <li>Original CD or external storage device must be submitted at the registration desk, a day before the event.</li>

              <li>One representative from each school should be present at the technical forum prior to the performance.</li>

              <li>Each school must carry their own props.</li>

              <li>Bollywood songs are not allowed.</li>

              <li>No offensive language should be there in the songs.</li>

              <li>The performance should be limited to the stage.</li>

              <li>Chewing gum on stage is strictly prohibited.</li>

              <li>Judging Criteria:</li>

              <li>Theme.</li>

              <li>Choreography.</li>

              <li>Coordination.</li>

              <li>Costume (Appropriateness to the theme and the school environment).</li>

              <li>Executed within time.</li>

            </ol>
          </ion-item>





          <ion-item ng-if="group.name == 16" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">

              <li> Number of participants – 10+2 (for backstage help).</li>

              <li> Duration- 5+2 minutes.</li>

              <li> All attire must follow norms of decency.</li>

              <li> Any apparel that the judges consider obscene shall lead to immediate disqualification.

              </li>

              <li> Points shall be deducted for exceeding the time limit.</li>

              <li> Vulgarity of any kind will not be entertained and will lead to disqualification.</li>

              <li> School representatives must have a back-up CD or external storage device.</li>

              <li> Original CD or external storage device must be submitted at the registration desk, a day before the event.</li>

              <li> One representative from each school should be present at the technical forum prior to the performance.</li>

              <li> Bollywood songs are not allowed.</li>

              <li> No offensive language should be there in the songs.</li>

              <li> Judging criteria:</li>

              <li> Depiction of theme.</li>

              <li> Music.</li>

              <li> Wardrobe coordination.</li>

              <li> Ramp walk.</li>

              <li> Choreography.</li>

            </ol>
          </ion-item>




          <ion-item ng-if="group.name == 17" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">

              <li> Number of participants - 4-7.</li>

              <li> Duration 7+2 minutes.</li>

              <li> The time allotted includes time for sound check.</li>

              <li>Use of any kind of inappropriate language or vernacular language will lead to immediate disqualification.</li>

              <li> Participants are to perform in their school uniforms.</li>

              <li> Pre-Recorded music of any kind will not be allowed.</li>

              <li> The drum kit shall be provided by the school.</li>

              <li> Judging criteria:</li>

              <li> Vocals.</li>

              <li> Instruments.</li>

              <li>Synchronization.</li>

              <li>Audience Appeal/Expression.</li>

              <li>Delivery.</li>
              <li> Audience Encore.</li>

            </ol>
          </ion-item>

          <ion-item ng-if="group.name == 18" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li> Number of participants – 1.</li>

              <li> Duration – 8+2 minutes.</li>
              <li> No Bollywood tracks will be allowed.</li>

              <li> There is a compulsion of a minimum of two genres.</li>

              <li> Participants are not allowed to go in front of the console.</li>

              <li> Music containing foul language or objectionable words will lead to disqualification.

              </li>

              <li> Increasing the master volume unnecessarily is not allowed.</li>

              <li> Playing pre-recorded sets and mashups will lead to disqualification.</li>

              <li> Judging Criteria:</li>

              <li> Body Language.</li>

              <li> Selection of Tracks.</li>

              <li> Mixing and equalizing.</li>

              <li> Interaction with the crowd.</li>

              <li> Usage of effects.</li>

            </ol>
          </ion-item>



          <ion-item ng-if="group.name == 19" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li> Number of participants- 1+1.</li>

              <li>Duration – 2+1 minutes.</li>

              <li>If the judges feel that the performance is vulgar, the participant will be disqualified immediately.</li>

              <li>No foul language is to be used during the performance.</li>

              <li> Communal or racist jokes, and innuendos are to be strictly avoided.</li>

              <li> Judging Criteria:</li>

              <li> Content.</li>

              <li> Diction.</li>

              <li> Expression.</li>

              <li>Delivery.</li>

              <li>Audience Encore.</li>
            </ol>
          </ion-item>


          <ion-item ng-if="group.name == 21" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants- 1.</li>

              <li>Duration</li>

              <li> Recitation- 2+1 minutes.</li>

              <li> Preparation- 1 hour.</li>

              <li> Communal or racist pieces will lead to disqualification or negative marking.</li>

              <li> Topics to be given on spot.</li>
            </ol>
          </ion-item>



          <ion-item ng-if="group.name == 20" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Duration – 5+5 minutes.</li>
              <li> 5-7 minutes for stage preparation.</li>

              <li>CDs or external storage devices to be submitted at the registration desk on the day before the event.</li>
            </ol>
          </ion-item>



          <ion-item ng-if="group.name == 22" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants- 2.</li>

              <li> Duration- 2+1 minutes for speech and 1 minute for rebuttal.</li>

              <li> One participant of each school will be a member of the proposition, and the other will be a member of the opposition.</li>

              <li> Schools will be divided into groups on the basis of a lucky draw.</li>

              <li> Topics will be given at the end of the first day of the fest.</li>
            </ol>
          </ion-item>



          <ion-item ng-if="group.name == 23" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants- 2 +1 (to be present at the technical forum).</li>

              <li> Duration- 5+2 minutes.</li>

              <li> Topic will be given at the second representative’s meeting.</li>
            </ol>
          </ion-item>




          <ion-item ng-if="group.name == 24" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li> Number of participants-1.</li>

              <li> Duration- 2 hours.</li>

              <li>Topics will be disclosed on the spot.</li>

              <li> Participants are required to make at least 8 frames.</li>

              <li> Paper will be provided on spot.</li>

              <li>Participants are to bring their own stationary.</li>

              <li> Judging criteria:</li>

              <li> Composition.</li>

              <li> Development of ideas.</li>

              <li> Skill, technique and process.</li>

              <li> Depth and breadth of composition.</li>

              <li> Presentation of work.</li>
            </ol>
          </ion-item>



          <ion-item ng-if="group.name == 25" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants-1+1+1 (Total: 3).</li>

              <li>Duration- 1 hour.</li>

              <li> Languages- English, Hindi and Bengali.</li>

              <li> Topics will be disclosed on the spot.</li>

              <li>Paper will be provided on spot. Participants are to bring their own stationary.</li>

              <li>No electronic devices allowed.</li>
            </ol>
          </ion-item>



          <ion-item ng-if="group.name == 26" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants-7 (5for Counter Strike and 2 for FIFA™).</li>

              <li>Duration- On Spot.</li>

              <li> Electronic devices, apart from headphones, are not allowed.</li>

              <li>Use of colloquial language and signs is not permitted and will lead to disqualification.

              </li>
            </ol>
          </ion-item>



          <ion-item ng-if="group.name == 27" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li> Number of participants-2.</li>

              <li> Duration- First two days of the fest.</li>

              <li> Participants are to bring their own equipment and no additional help will be provided.

              </li>

              <li> The memory card of the camera should be empty.</li>

              <li> Shooting only inside the school campus.</li>

              <li> Judging criteria:</li>

              <li> Concept.</li>

              <li> Skill.</li>

              <li> Editing.</li>

              <li> Presentation.</li>
            </ol>
          </ion-item>



          <ion-item ng-if="group.name == 28" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants-2.</li>

              <li> Duration- 2 hours.</li>

              <li> Paint and material to be brought by the participants.</li>

              <li> Judging criteria:</li>

              <li> Composition.</li>

              <li> Development of ideas.</li>

              <li> Skill, technique and process.</li>

              <li> Depth and breadth of composition.</li>

              <li> Presentation of work.</li>
            </ol>
          </ion-item>


          <ion-item ng-if="group.name == 29" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants- 2. </li>

              <li>Duration- 2 hours.</li>

              <li> Participants are required to make 1 drink, 1snack/starter and 1 dessert.</li>

              <li> Participants can place a requisition to the Heritan Representatives for the materials, ingredients and cutlerY and serving plates and glasses, at the end of the first day of the fest.</li>

              <li> All meals must be prepared without any use of fire and no equipment such as induction cook-topcan be used.</li>

              <li> Food should be vegetarian.</li>

              <li> No type of alcohol should be used.</li>

              <li> Refrigerator will be provided.</li>

              <li> Boiled vegetables, prepared sauce and plain cakes/biscuits can be brought for the event.</li>

              <li> Extra points will be awarded for good presentation and cleanliness on the working table.</li>

              <li> Judging Criteria:</li>

              <li> Taste, Flavour and Colour.</li>

              <li> Table layout and presentation.</li>

              <li> Originality.</li>

              <li> Cleanliness.</li>

              <li> Preparation time taken.</li>
            </ol>
          </ion-item>



          <ion-item ng-if="group.name == 30" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants- 2.</li>

              <li> Duration- Whole Day.</li>

              <li> Participants have to bring their own camera.</li>

              <li> The memory card of the camera should be empty.</li>

              <li> Theme will be given on the spot.</li>

              <li> Camera Model, Lens used, Shutter speed, Aperture, ISO, Metering, Mode, All these are the EXIFdetails.</li>

              <li>Judging Criteria:</li>

              <li> Originality.</li>

              <li> Technical Excellence.</li>

              <li> Composition.</li>

              <li> Artistic Merit.</li>

              <li> Overall impact.</li>
            </ol>
          </ion-item>


          <ion-item ng-if="group.name == 31" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants - 2 (representative event).</li>

              <li> Use of mobile phones or any other e-devices will lead to immediate disqualification.

              </li>
            </ol>
          </ion-item>


          <ion-item ng-if="group.name == 38" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
            <ol style="list-style:initial !important" class="padding">
              <li>Number of participants- 4</li>

              <li>15 minutes each for a maximum of 7 rounds.</li>

              <li>All other laws of FIDE will be applied.</li>
            </ol>
          </ion-item>

        </div>
      </ion-list>

#8

Please make sure you are formatting your code properly with markdown code blocks


#9

does formatting the indentation makes the work ?


#10
```
myExample
```

This is how you would format


#11

So you might want to look into simplifying your markup.

You have a lot of conditionals that need to be processed. Multiply that for over 100 items…

Thats a lot of things that need to be done before render :fearful:


#12

Had similar issue. I stripped out my html bits by bits and discovered has-header="true" padding="true" were making the app slow. Removed them and noticed considerable speed


#13

There is another approach.
Create the html in js and after that just apply in html