如何在 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>