Как центрировать последний элемент в ng repeat

Question

Я использую ng-repeat для создания элементов.
Я использовал: nth-child(4n+1) для отображения только 4 элементов подряд, но я хочу, чтобы последние элементы div были выровнены по центру.
Есть ли способ сделать это в Angular?
Предположим, что есть 9 элементов, я хочу отобразить 9-й элемент в центре.

HTML:

<div class="container " ng-app="myApp" ng-controller="myCtrl">
  <div class="row LaunchTrackerBrands text-center" >
    <div class="col-md-2 col-sm-4 Brandtracker" ng-repeat="data in LauncherData">
      <div class="BrandName " title="{{data.Brand}}" >
        <img src={{data.src}} draggable="false" text-center/>
         <div class="Metaname">
            <div class="inner-triangle" style="border-left: {{data.color}} 30px solid"></div>
            {{data.name}}
          </div>
        </div>
      </div>
    </div>
  </div>

CSS

body {
    background-color: rgb(247, 247, 247);
}

.LaunchTrackerBrands {
    margin-top: 5em;
}

.Brandtracker {
    margin-left: 2em
}

.LaunchTrackerBrands :nth-child(4n+1) {
    clear: both;
}

.BrandName {
    background-color: white;
    border-radius: 10px;
    box-shadow: 2px 2px 2px #999;
    margin: 20px;
    margin-left: 2em;
    width: 150px;
    margin-left: 2em;
}

    .BrandName a img {
        padding: 0.5em;
        width: auto;
        height: auto;
        max-width: 100%;
    }

.Metaname {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #f8f8f8;
    padding: 4px;
    position: relative;
    overflow: hidden;
}

.inner-triangle {
    border-right: 25px solid transparent;
    border-bottom: 25px solid transparent;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 4;
}

Answer 1

Попробуйте,

<div class="col-md-2 col-sm-4 Brandtracker"
     ng-repeat="data in LauncherData"
     ng-class="{'alignCenter':$last}">
</div>

где alignCenter будет классом, который выравнивает ваш элемент по центру.

Answer 2

Итак, вы можете сделать следующее: сохранить текущее значение index в поле ng-repeat с помощью $index. Чем использовать ng-class, чтобы проверить, совпадает ли текущий индекс с length зацикленного списка, так что это последний элемент в каждом случае. Если условие истинно, добавьте class, который центрирует элемент.

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.myList = [{
      id: 0,
      text: "item 1"
    },
    {
      id: 1,
      text: "item 2"
    },
    {
      id: 2,
      text: "item 3 (last one)"
    }
  ];

  $scope.myList2 = [{
      id: 0,
      text: "item 1"
    },
    {
      id: 1,
      text: "item 2"
    },
    {
      id: 2,
      text: "item 3"
    },
    {
      id: 3,
      text: "item 4"
    },
    {
      id: 4,
      text: "item 5 (last one)"
    }
  ];
});

.list {
  display: flex;
  flex-direction: column;
}

.list--centered {
  align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController" class="wrapper">
  <div class="list" ng-repeat="item in myList" ng-init="idx = $index" ng-class="myList.length == idx + 1 ? 'list--centered' : ''">
    <span class="list__item">{{item.text}}{{idx}}</span>
  </div>
  <br><br><br>
  <div class="list" ng-repeat="item in myList2" ng-init="idx = $index" ng-class="myList2.length == idx + 1 ? 'list--centered' : ''">
    <span class="list__item">{{item.text}}{{idx}}</span>
  </div>
</div>