html - 如何在没有 flex-wrap 的 ionic 框架中制作每行包含两个图像的图像网格 :wrap;

Question

我想制作一个网格，其中每行有两张图片。我正在使用 flex-wrap: wrap;它在 android 4.4+ 上运行良好，但不适用于低于 android 4.4 的系统。我想在不使用 flex-wrap 的情况下实现这一目标

这是我的看法:

<ion-view class="feeds-categories-view">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon">    </button>
  </ion-nav-buttons>
 <ion-nav-title>
    <span>Feeds Categories</span>
  </ion-nav-title>
  <ion-content scroll="true" class="has-header has-subheader">
    <div class="row-cat row">
        <div class="col col-50" ng-repeat="items in ProductList">
         <img ng-src="{{items.image}}" width="100%" />
       </div>
    </div>    

  </ion-content>
</ion-view>

Controller :

.controller('Home-FeedsCtrl', function($scope) {


  $scope.ProductList = [
{"id":"1","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-    iPhone-b-font-5-5G.jpg"},
{"id":"2","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-   iPhone-b-font-5-5G.jpg"},
{"id":"3","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-    iPhone-b-font-5-5G.jpg"},
{"id":"4","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-    iPhone-b-font-5-5G.jpg"},
{"id":"5","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-    iPhone-b-font-5-5G.jpg"},
{"id":"6","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-    iPhone-b-font-5-5G.jpg"},
{"id":"7","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-    iPhone-b-font-5-5G.jpg"},
{"id":"8","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-    iPhone-b-font-5-5G.jpg"},
{"id":"9","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-    iPhone-b-font-5-5G.jpg"},
]
})

样式表:

.cat-img-box{
  width: 50%
}


.row-cat{
    margin-top: 15px !important;

flex-wrap: wrap !important;
}
.col-cat{
  padding: 20px !important;
}

Answer 1

<div ng-repeat="(key, image) in images">
    <div class="row" ng-show="$even">
        <div class="col"><img src="images[$index]"></div>
        <div class="col"><img src="images[$index+1]"></div>
    </div>
</div>

Shi 可以工作。

引用: Create Row every after 2 item in Angular ng-repeat - Ionic Grid