Menu
I changed the following using angular 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> To this
<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> Everything seems fine except I could not find a way to add class="first" in the first element and class="last" in the last element of ng-repeat.
216
$first and $last It's common when using ng-repeat to add specific behavior to the first or last element of the loop, e.g. special styling around the edges. Instead, ng-repeat already supplies you with two ready boolean properties. $first is true for the first element, and $last is true for the last element.
Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.
Track by $index in AngularJSThe ngRepeat track by $index allows you to specify which items should be repeated using their index number. The ngRepeat is a directive that can be added to the HTML template of an Angular application. It is used for creating lists, and it can take an expression as an argument.
However, some directives, such as ng-controller and ng-repeat, create new child scopes and attach the child scope to the corresponding DOM element.
Just use $first and $last combined with ng-class:
<a ng-repeat="sMedia in socialMedia" ng-class="{'first': $first, 'last': $last}" href="#" > See here how they work: https://docs.angularjs.org/api/ng/directive/ngRepeat
177
You can use:
#social a:first-child{ /* your first css code */ } #social a:last-child{ /* your last css code */ } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
