AngularJS - 使用 ng-style 有条件地将样式应用于 ng-repeat 中的第一个元素答案

【问题标题】：AngularJS - Conditionally apply style using ng-style to first element in ng-repeatAngularJS - 使用 ng-style 有条件地将样式应用于 ng-repeat 中的第一个元素
【发布时间】：2017-02-06 00:00:08
【问题描述】：

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

谢谢！

【问题讨论】：

您遇到此问题是因为 cssRow 在指令 ngZero 中覆盖了您的样式。您可以按照建议使用其他解决方案；顺便说一句，参数元素已经是 jqLite 包装的元素，因此无需再次将其包装在 jQuery 中。

标签： angularjs ng-style

【解决方案1】：

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

Plunker

【讨论】：

【解决方案2】：

你不需要一个指令。 ng-repeat 范围在重复范围中公开了一个属性$first，这对于第一个元素是正确的。您可以为第一行定义一个类并使用 ng-class 来应用它

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

【讨论】：

【解决方案3】：

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

此外，您不应在控制器中操作 HTML 或引用演示文稿/css。

【讨论】：

【解决方案4】：

您可以使用 ng-if - 1.1.5 版中的新功能，用于有条件地操作 CSS 样式。

【讨论】：