離子 - 在一行中包裹多個元素

Question

我剛開始使用離子，對於我對工具包的低度理解感到抱歉。我正在和Angular合作，所以我通過ng-repeat在我的HTML中獲得了一個數組，我不知道它有多大。我如何確保每個元素都具有1/3的視口，並且相互左移並在3個元素之後跳轉到下一行？

我不能使用row類，因爲我不知道我到底有多少元素。 'col'類似乎不是內嵌塊或左浮動的，所以元素不會環繞。

note：我可以很容易地注入自己的CSS，但我確定Ionic本身可以處理這個問題，對吧？

Answer 1

比方說，在你的控制你加載圖像列表：

$scope.images = []; 

在你看來，你可以使用ng-if創建一個行每3個元素，並且使用一列.col-33這是你的看法33.3％ 。

<div class="row" ng-repeat="image in images" ng-if="$index % 3 === 0"> 
    <div class="col col-33" ng-if="$index < images.length"> 
    <img ng-src="{{images[$index].src}}" width="100%" /> 
    </div> 
    <div class="col col-33" ng-if="$index + 1 < images.length"> 
    <img ng-src="{{images[$index + 1].src}}" width="100%" /> 
    </div> 
    <div class="col col-33" ng-if="$index + 2 < images.length"> 
    <img ng-src="{{images[$index + 2].src}}" width="100%" /> 
    </div> 
</div> 

在每列中，您需要檢查您是否已達到陣列的長度。

你可以看到它是如何工作的here。