AngularJS - условно применить стиль с использованием стиля ng к первому элементу в ng-repeat

У меня есть объект стилей, и мне нужно установить другой стиль css только для первого элемента. Специально для этого создал директиву, но она не работает

Я буду признателен за вашу помощь!

Вот код:

<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"});
    };
}]);

Спасибо!


angularjs ng-style
person Shaper    schedule 07.08.2014    source источник
comment
У вас возникла эта проблема, потому что cssRow переопределяет ваш стиль в директиве ngZero. Вы можете использовать другие решения, как предлагается; Кстати, элемент arguments уже является элементом, обернутым в jqLite, поэтому нет необходимости снова обертывать его в jQuery.   -  person yachaka    schedule 07.08.2014

Ответы (4)


arrow_upward
5
arrow_downward 

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

Плункер

person AlwaysALearner    schedule 07.08.2014

arrow_upward
4
arrow_downward

Для этого не нужна директива. Область ng-repeat предоставляет свойство $first в области повторения, которое истинно для первого элемента. Вы можете определить класс для первой строки и использовать ng-class для его применения.

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

person Chandermani    schedule 07.08.2014

arrow_upward
0
arrow_downward

Вы можете использовать $index для отслеживания n-го элемента. Не уверен, что директива была создана для решения этой проблемы, но может просто использовать ng-attr-style="{$index==1 ? '"padding-top" : "0px"}'}"

Также вы не должны манипулировать HTML или ссылаться на презентацию/css в контроллерах.

person bhantol    schedule 07.08.2014

arrow_upward
-1
arrow_downward

вы можете использовать ng-if — новое в версии 1.1.5, для условного управления стилями CSS.

person Sreeram Nair    schedule 07.08.2014