AngularJS - Conditionally apply style using ng-style to first element in ng-repeat

Problem

I have an object of styles and I need to set another css style only for the first element. I created a directive especially for that, but it doesn't work

I will appreciate your help!

Here is the code:

<div class="row" ng-style="rowCss" ng-repeat="top in gridObj" ng-zero>
$scope.rowCss = {
    "height" : rowAndSquareHeight,
    "padding-top": baseLine
}

editorApp.directive('ngZero', ['$document', '$parse', function($document, $parse) {
    return function(scope, element, attr) {
        $(element).css({"padding-top" : "0px"});
    };
}]);

Thanks!

Problem courtesy of: Shaper

Solution

<div class="row" 
    ng-style="{ true : rowCss }[$first]" 
    ng-repeat="top in gridObj">
    ...

Plunker

Solution courtesy of: AlwaysALearner

Discussion

you can use the ng-if - new in version 1.1.5, for manipulating CSS styling conditionally.

Discussion courtesy of: Sreeram Nair

You can use $index to track the 'n'th element. Not sure if the directive has been created to solve this issue but could just use ng-attr-style="{$index==1 ? '"padding-top" : "0px"}'}"

Also you should not manipulate HTML or refer to presentation/css in Controllers.

Discussion courtesy of: bhantol

You don't need a directive for that. ng-repeat scope exposes an property $first in the repeat scope which is true for first element. You can define a class for the first row and use ng-class to apply it

ng-class="{'my-first-class':$first}"

Discussion courtesy of: Chandermani

This recipe can be found in it's original form on Stack Over Flow.