AngularJS -对ng-repeat中的第一个元素有条件地应用ng-style

Question

我有一个样式对象，我需要为第一个元素设置另一个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"});
    };
}]);

谢谢!

Answer 1

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

恰好

Answer 2

你不需要一个指令。ng-repeat作用域在repeat作用域中公开属性$first，该属性对第一个元素为真。您可以为第一行定义一个类，并使用ng-class来应用它

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

Answer 3

您可以使用$index来跟踪第n个元素。不确定是否已经创建了指令来解决这个问题，但可以使用ng- attri -style="{$index==1 ?'"padding-top": "0px"}'}"

你也不应该操纵HTML或在控制器中引用presentation/css。

Answer 4

你可以使用1.1.5版新增的ng-if -来有条件地操作CSS样式。