so using angular-deckgrid display images. have 2 columns displaying images column-1-2 class described in docs inside container . in cases, 1 image in last row , in such cases want make image take whole width instead of 50% of space .
now how 2 columns rendered :
<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>
as can see , first column has 3 , second column has 2 .. want third card in first column take whole width .. not able in controller because template not rendered yet . using css in direction ::
.column-1-2 div[data-ng-repeat]:last-child { width:200%!important; }
but how check if first column , second column has unequal child in css .
thanks
maybe wrong can use $last property of ng-repeat combined ng-class. add class mylast-child
last div of ng-repeat
<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; }
the ng-repeat have other interesting option :
variable | type | details -------------------------------- $index | number | iterator offset of repeated element (0..length-1) $first | boolean | true if repeated element first in iterator. $middle | boolean | true if repeated element between first , last in iterator. $last | boolean | true if repeated element last in iterator. $even | boolean | true if iterator position $index (otherwise false). $odd | boolean | true if iterator position $index odd (otherwise false).
Comments
Post a Comment