проверить, равен ли $ index в ng-repeat

Question

У меня есть сетка с двумя сетками в строке. Это код:

<ion-content scroll="true" class="has-header"> 
    <div class="row" style="padding-bottom: 40px;"> 
    </div> 
    <div ng-repeat="i in products"> 
     <div class="row" ng-if="$even"> 
      <div class="col col-50"> 
      <a class="item item-thumbnail-center" href="#"> 
       <img src="http://{{host}}/{{ 
       products[$index].prod_img 
       }}" class="img-thumbnail"> 
       <h2>{{products[$index].prod_name}}</h2> 
       <p>Php {{products[$index].prod_price}}.00</p> 
      </a> 
      </div> 
      <div class="col col-50" ng-if="$index + 1"> 
      <a class="item item-thumbnail-center" href="#"> 
       <img src="http://{{host}}/{{ 
       products[$index + 1].prod_img 
       }}" class="img-thumbnail"> 
       <h2>{{products[$index + 1].prod_name}}</h2> 
       <p>Php {{products[$index + 1].prod_price}}.00</p> 
      </a> 
      </div> 
     </div> 
    </div> 
    </ion-content> 

controller.js

$http.get("http://"+ $scope.host +"/mobile/get_products.php?cat_id=" + $stateParams.cat_id) 
    .then(function(response) { 
    $scope.products = response.data; 
    }); 

Проблема заключается в том, когда размер продуктов массива является нечетным, вторая сетка в последней строке все еще показывает вверх и, конечно, не отображается пункт там, потому что элемент указан индексом нулевым. Я нашел другое решение о том, как это сделать, настроив массив прямо с контроллера, но я хочу спросить, есть ли способ проверить с помощью угловой директивы, является ли значение $ index равным нулю, а если true, сетка будет скрытый.

Answer 1

вы можете использовать директиву ng-class и поставить класс css, который станет истинным, когда продукты [$ index] === null | продукты [$ index + 1] === null. это будет как

ng-class={'hide-row': products[$index] === null | products[$index+1] === null} 

где CSS

.hide-row{ display : none;}