Angular Js: Wie findet man das erste und letzte Element in ng-repeat und fügt ihnen eine spezielle Klasse hinzu?

Question

Ich habe die folgende Verwendung von Winkel js

<section id="social"> 
    <h2 class="line">Social Profiles</h2> 
    <a href="#" class="first"><i class="icon-facebook"></i></a> 
    <a href="#"><i class="icon-twitter"></i></a> 
    <a href="#"><i class="icon-linkedin"></i></a> 
    <a href="#"><i class="icon-google-plus"></i></a> 
    <a href="#" class="last"><i class="icon-rss"></i></a> 
    <div class="clear"></div> 
</section> 

Zu diesem

<section id="social"> 
    <h2 class="line">Social Profiles</h2> 
    <a ng-repeat="sMedia in socialMedia" ng-if="$first" href="#" > 
     <i class="{{sMedia.icon}}"></i> 
    </a> 
    <div class="clear"></div> 
</section> 

Alles scheint in Ordnung, außer ich nicht einen Weg hinzuzufügen class="first" in dem ersten Element und class="last" in dem letzten Element ng-repeat finden konnten, .

Answer 1

verwenden nur $ ersten und $ zuletzt mit ng-Klasse kombiniert:

<a ng-repeat="sMedia in socialMedia" ng-class="{'first': $first, 'last': $last}" href="#" > 

hier sehen, wie sie funktionieren: https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 2

Sie verwenden können:

#social a:first-child{ /* your first css code */ } 
#social a:last-child{ /* your last css code */ }