0

Hi I have the below structure in html:

<label class="btn btn-primary demo-review" ng-model="demo.ids" ng-click="selectMe($event,3)" btn-radio="'{{demo.demoinfo.ids}}'">
        <i class="check-circle btn-success selected" aria-hidden="true"></i>
        <p ng-repeat="race in demo.demoinfo.selectedRaces track by $index" class="text-center">
          {{race.racename}}<br />
        </p>
      </label>

As you can see here I am rendering number of race elements using ng-repeat. But the icons is a bootstrap one, which is coming right side of the top race element. What I want is to render that icon right next to the middle race element. So, if there are 5 elements, it should be next to the 3rd, if there are 4 elements it should be next to the 2nd.

Is it possible to do in AngularJS ? Thanks in advance.

br.julien
  • 3,420
  • 2
  • 23
  • 44
user2948533
  • 1,143
  • 3
  • 13
  • 32
  • This post may help you: http://stackoverflow.com/questions/33752526/how-to-use-ng-repeat-for-creating-the-list-of-m-items-in-thumbnail-format-having/33752849#33752849 – Sujata Chanda Nov 17 '15 at 11:16

1 Answers1

0

You could use the index and the length of the array in an expression.

<label class="btn btn-primary demo-review" ng-model="demo.ids" ng-click="selectMe($event,3)" btn-radio="'{{demo.demoinfo.ids}}'">
    <p ng-repeat="race in demo.demoinfo.selectedRaces track by $index" class="text-center">
        <i class="check-circle btn-success selected" aria-hidden="true" 
            ng-show="($index * 2 + 2) === demo.demoinfo.selectedRaces.length || ($index * 2 + 1) === demo.demoinfo.selectedRaces.length"></i>
            {{race.racename}}<br />
    </p>
</label>

It would be cleaner if you injected Math into the scope (you will be able to use Math.floor)

potatopeelings
  • 40,709
  • 7
  • 95
  • 119
  • It is taking them as comment instead of generating element. – user2948533 Nov 17 '15 at 15:41
  • Don't think it is taking as a comment (because with no CSS if I put something within the tags you can see the tag). It's probably your CSS that's causing it to collapse - could you set up a fiddle? Cheers! – potatopeelings Nov 18 '15 at 08:30