更改甲板网格中最后一张卡片的宽度

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 i 是朝这个方向发展的东西 ::

.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
}