Question

所以我使用angular-deckgrid来显示图像。我有两列用于显示带有 column-1-2 类的图像，如容器内的文档中所述。现在在某些情况下，它们只是最后一行中的一个图像，在这种情况下，我想让该图像占据整个宽度而不是50％的空间。

现在这是渲染两列的方式：

<div deckgrid="" class="deckgrid ng-isolate-scope" source="loves">
   <div data-ng-repeat="column in columns" class="column column-1-2">
      <div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"> "my card layout here" </div>
      <div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"> "my card layout here" </div>
      <div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"> "my card layout here" </div>
   </div>
   <div data-ng-repeat="column in columns" class="column column-1-2">
      <div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"> "my card layout here" </div>
      <div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"> "my card layout here" </div>
   </div>
</div>

正如你所看到的，第一列有三列和第二列有两个..我希望第一列中的第三张卡占据整个宽度.. 无法在控制器中执行此操作，因为尚未呈现模板。使用css我是朝这个方向的东西::

.column-1-2 div[data-ng-repeat]:last-child {
    width:200%!important;
}

但是如何检查第一列和第二列是否在css中具有不相等的子项。

由于

Answer 1

也许我弄错了但你可以使用ng-repeat的$ last属性组合到ng-class。它会将类mylast-child添加到ng-repeat

的最后一个div中

 <div data-ng-repeat="card in column" 
      data-ng-include="cardTemplate" class="ng-scope"
      ng-class="{'mylast-child': $last}" > 
             "my card layout here"
 </div>


 .mylast-child {
     width:200%!important;
 }

ng-repeat还有其他有趣的选择：

Variable |  Type     |  Details
--------------------------------
$index   |   number |    iterator offset of the repeated element (0..length-1)
$first   |   boolean |  true if the repeated element is first in the iterator.
$middle  |  boolean | true if the repeated element is between the first and last in the iterator.
$last    |   boolean |  true if the repeated element is last in the iterator.
$even    |   boolean |  true if the iterator position $index is even (otherwise false).
$odd     |   boolean |  true if the iterator position $index is odd (otherwise false).

Answer 2

您可能想要使用Angular内置函数

var firstChildCount =  angular.element(angular.element(".column")[0]).find('div').length;
var secondChildCount =  angular.element(angular.element(".column")[1]).find('div').length;

if(firstChildCount  !== secondChildCount ){
     //Apply CSS
}

更改deckgrid中

2 个答案: